Адаптивный сайт на iPhone - нежелательное пустое пространство при повороте от пейзажа к портрету

Question

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

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

Если вам нужно что-то увидеть дальше, только я знаю:)

Answer 1

Исправлено!Проблема возникла из одного конкретного div - чтобы найти его, это был процесс удаления различных элементов, пока проблема не исчезла.

Чтобы исправить это, мне нужно было добавить overflow-x: hidden к этому элементу div, и он разбирается!Надеюсь, что это полезно для других с подобной проблемой.

Answer 2

У меня была такая же проблема, я исправил ее установкой:

html, body { width:100%;  overflow:hidden; }

Answer 3

Эта проблема возникает, когда ширина любого деления больше ширины экрана iPAD.

В моем случае некоторые деления имели размер 1000 пикселей, поэтому я просто выбрал width:auto, и оно работает.overflow-x:hidden также делает то же самое, но не является предпочтительным способом.

Answer 4

Использование «overflow-x: hidden» решает часть проблемы, но затягивает прокрутку, действуя странно (как сказал Джейсон).

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

Если вы используете в своих формах Bootstrap Twitter с зонами «контрольной группы», проблема может быть в этом. В моем случае я решил проблему с:

.control-group .controls {
     overflow-x: hidden
 }

Теперь пустое пространство справа исчезло:)

Answer 5

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

Следующий код исправил это для меня (не помню, откуда я его получил в данный момент)

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function() {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Answer 6

Исправлена! Была похожая проблема. Исправлено это путем установки ширины в текущую ширину устройства.

body, html {
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;

}

Answer 7

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

html, body {width: 100%; х переполнение: скрытый; }

, кажется, сработало для меня!

Answer 8

Я перепробовал все, что было предложено здесь, ничего не работает.Тогда я понял, что это связано с масштабом страницы.Затем я добавил <meta name="viewport" content="width=device-width, initial-scale=1.0"> в header.php в папке моей основной темы, и это исправило проблему.

Answer 9

решено ¡¡

С момента установки шаблона protostar joomla 3.X и начала добавления контента в модуль K2 я заметил, что надоедливая прокрутка с пустым пространством на правой стороне, что особенно заметно в iphones.

Для Евы Мари Расмуссен был дан правильный частичный ответ, добавив к тегу body в файле template.css следующие значения:

width: auto;
overflow-x: hidden;

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

width: auto;
overflow-x: hidden;

В моем случае добавьте к классу "span" эти две строки, чтобы они наконец выглядели так:

[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;

И это работает сейчас ¡¡

Answer 10

Я использую Bootstrap 3.3. Я перепробовал все эти решения, и ничего не получалось. Затем я изменил свой < div class = "container" > на < div class = "container-liquid" > в разделе, с которым у меня возникли проблемы. Это решило проблему.