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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Фактически мне просто нужно было изменить метатег области просмотра с:

<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' />

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

Answer 4

body div {переполнение: скрыто;} @ медиа-запросы

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

Answer 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' />

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

Answer 6

Попробуйте это варианты

html, body{ overflow-x: hidden; }