HTML - Мобильный макет - Положение прокрутки после изменения ориентации

Question

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

Мне очень трудно описать, так как я не уверен, что происходит, поэтому у меня естьпредоставил код, который я использую

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

Это связано с тем, как я настраиваю свой видовой экран, или с известной проблемой в браузерах webkit, поскольку это происходит как на IOS, так и на Android (такжехром)?

Любая помощь приветствуется!

Answer 1

Ну, на самом деле это вполне логично:

Допустим, вы на iPhone.Размер экрана 320x480 в портретной ориентации, 480x320 в альбомной.

В портретной области общий глобальный дивизион составляет 200%, поэтому 640 пикселей.Зеленая часть в 320px.В ландшафте ваш глобальный div имеет ширину 960 пикселей.Зеленая часть имеет 480px.

Если вы перейдете к зеленой части в портретной ориентации, вы выделите 320px.Когда вы меняете ориентацию, вы по-прежнему находитесь на 320px, но зеленая часть теперь на 480px: застряла в середине.

Возможное решение: JavaScript, прослушивание события onorientationchange и установка правого смещения.

Другое (но плохое) решение: область просмотра с фиксированной шириной, за пример:

<meta name="viewport" content="width=400px,initial-scale=1.0,maximum-scale=1.0" />