Запретить боковую прокрутку сайта в мобильном сафари

Question

У меня есть веб-сайт, основанный на jQuery Mobile. Я использую тег viewport, чтобы подогнать мой сайт под размер экрана.

Пока все хорошо.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Но проблема в том, что я все еще могу прокручивать весь экран (весь браузер мобильного сафари) по экрану.

Я пытался установить

body {
   overflow:hidden;
}

как описано в других постах здесь. Но это не работает для меня. У кого-нибудь есть идея, как это исправить?

Answer 1

У меня была такая же проблема, и я решил использовать этот обходной путь:

document.ontouchmove = function(event) {
    event.preventDefault();
};

Answer 2

Я сравнил ваш сайт с одним из наших.Вы используете jQuery Mobile 1.0RC1, а мы используем 1.0b3.Проблема возникает на вашем сайте, но не на нашем.

Может быть, попробуйте обновить до последней версии jQuery Mobile?

Answer 3

Как указал Джаспер, у вас есть 404 при попытке получить эти:

• http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/img/cursors/grab.png (изображение)
• http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL2/wp_properties.css?ver=1.13 (стр.)
• http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/js/jquery-1.6.2.min.js (библиотека jQuery)

Похоже, у вас есть пробел в имени папки "jquerymobile-FDL 2", я бы переименовал его без пробела.

Также я не уверен, что у вас может быть метатег внутри тегов title или style, может быть, все метатеги перенести в начало вашего тега head?

• http://www.w3schools.com/html5/tag_meta.asp

Также вы, кажется, импортируете две разные версии jQuery

• http://code.jquery.com/jquery-1.5.2.min.js?ver=3.2.1
• http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/js/jquery-1.6.2.min.js

Answer 4

Ну масштабирование и прокрутка не всегда должны быть связаны. Ваша проблема здесь не с областью просмотра, а с фактической шириной вашего сайта, если размер больше, чем размер экрана, у вас будут проблемы с прокруткой. Вам нужно привести нам живой пример, чтобы мы могли помочь вам найти элементы, которые выходят за рамки вашего макета