Мобильный Safari Viewport - предотвращение горизонтальной прокрутки?

Я пытаюсь настроить видовое окно для мобильного Safari. Используя метатег viewport, я пытаюсь убедиться, что нет масштабирования, и что вы не можете прокручивать представление по горизонтали. Это метатег, который я использую:

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

На моем iPhone, когда я загружаю страницу, она выглядит нормально:

Но я могу прокручивать по горизонтали, так что это выглядит так (это как можно правее, как я могу:

Когда я поворачиваю его в альбомный вид, страница отображается так, как ожидалось, блокируя положение горизонтальной прокрутки.

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

Ответ 1

Возможно ли, что у меня есть элемент страницы, который выталкивает содержимое?

Да, это действительно так. Параметр viewport определяет только видимую область видового экрана, но не имеет отношения к отключению панорамирования в боковом направлении.

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

NB: другие мобильные браузеры также поддерживают метатег viewport с течением времени, поэтому вы также захотите протестировать их.

Ответ 2

body { overflow-x: hidden; } также работает.

Ответ 3

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

На самом деле мне просто нужно было изменить метатег viewport:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

Добавление "начального масштаба" заблокировало его так, чтобы оно прокручивалось только вертикально, как ожидалось.

Ответ 4

body div {overflow: hidden;} @медиа-запросы

. Это предотвратит любой элемент, выталкивающий контент.

Ответ 5

Не знаю, было ли неверно введено его только я, или был ли введен некорректный код, но:

должен ли это

<meta name='viewport' content='content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

не читается как

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

поэтому содержимое отображается только один раз с выводом "как оно не закрывается" в конце кода.....