Я создаю отзывчивый веб-сайт и только что заметил странное поведение на своих страницах контента, если смотреть на iPhone. Он правильно масштабируется при загрузке в портретном режиме, а также при повороте в положение "пейзаж". Однако при повороте назад к портрету страница, похоже, сдвигается влево или неправильно масштабируется, и с правой стороны находится полоса белого пространства. Это белое пространство также кажется присутствующим при первой загрузке в портрете, поскольку пользователь может пронести страницу слева.
Вместо того, чтобы больше усложнять объяснение, здесь ссылка на образец страницы, где это поведение происходит. Посмотрите на iPhone, а затем посмотрите домашнюю страницу, у которой нет этой проблемы.
Если вам нужно увидеть что-нибудь еще, только я знаю:)
Исправлено! Проблема исходила от одного конкретного div - чтобы найти его, это был процесс удаления различных элементов, пока проблема не исчезла.
Чтобы исправить это, мне нужно добавить overflow-x: hidden в этот div, и он сортирует его! Надеюсь, это полезно для других с аналогичной проблемой.
У меня была та же проблема, я исправил ее, установив:
html, body { width:100%; overflow:hidden; }
Эта проблема возникает, когда ширина любого деления больше ширины экрана iPAD.
В моем случае некоторые подразделения имели размер 1000 пикселей, поэтому я просто пошел за width:auto, и он работает. overflow-x:hidden также делает то же самое, но не является предпочтительным способом.
У меня нет 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);
}
}
Использование "overflow-x: hidden" решает часть проблемы, но прикручивает свиток, действуя со странным поведением (как сказал Джейсон).
Иногда самая сложная задача - выяснить, что вызывает проблему. В моем случае, через несколько часов, если обнаружено, что проблема была в Twitter Bootstrap:
Если вы используете Twitter Bootstrap с зонами "контрольная группа" для своих форм, проблема может быть там. В моем случае я решил проблему с:
.control-group .controls {
overflow-x: hidden
}
Теперь пустое пространство справа исчезло:)
Я бы хотел добавить решение Navneet Kumar, потому что это сработало для меня. Любой тег div с шириной = 100% также не может иметь левое или правое заполнение. Мобильные браузеры (я заметил проблему на устройствах iPhone и Android) интерпретировали div как имеющую ширину более 100%, тем самым создавая дополнительное пространство с правой стороны. (Я знал это относительно фиксированной ширины, но не процентной ширины.) Вместо этого используйте width = auto в сочетании с дополнением.
Я знаю это некоторое время, так как этот раздел был открыт, но я столкнулся с подобной ситуацией и обнаружил, что это связано с тем, что у меня был элемент со следующими свойствами right: -999999px; position: absolute; скрытый экран.
Изменение выше на left: -999999px; position: absolute; решило ту же проблему, что и у OP (белый экран справа и возможность прокрутки вправо).
Я использую Bootstrap 3.3. Я попробовал все эти решения, и ничего не получилось. Затем я изменил контейнер < div class= "> на < div class=" контейнер-жидкость "> в разделе, в котором у меня были проблемы. Это решило проблему.
Я пробовал все, что было предложено здесь, ничего не работает. Затем я добавил, что он соединяется со шкалой страницы. Итак, я добавил <meta name="viewport" content="width=device-width, initial-scale=1.0"> в header.php в моей основной папке темы и устранил проблему.
Похоже, что результаты различаются для разных обстоятельств, но для сидения
html, body {width: 100%; х переполнение: скрытый; }
похоже, сработало для меня!
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;
И он сейчас работает ¡¡