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

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

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

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

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

У меня нет 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);
    }
}

Ответ 5

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

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

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

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

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

Ответ 6

Я бы хотел добавить решение Navneet Kumar, потому что это сработало для меня. Любой тег div с шириной = 100% также не может иметь левое или правое заполнение. Мобильные браузеры (я заметил проблему на устройствах iPhone и Android) интерпретировали div как имеющую ширину более 100%, тем самым создавая дополнительное пространство с правой стороны. (Я знал это относительно фиксированной ширины, но не процентной ширины.) Вместо этого используйте width = auto в сочетании с дополнением.

Ответ 7

Я знаю это некоторое время, так как этот раздел был открыт, но я столкнулся с подобной ситуацией и обнаружил, что это связано с тем, что у меня был элемент со следующими свойствами right: -999999px; position: absolute; скрытый экран.

Изменение выше на left: -999999px; position: absolute; решило ту же проблему, что и у OP (белый экран справа и возможность прокрутки вправо).

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

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

Ответ 11

SOLVED ¡¡

С момента установки protostar joomla template 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;

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