Проблема с полезной высотой экрана в альбомной ориентации - iOs Safari - PullRequest
0 голосов
/ 02 мая 2020

нужна помощь с сайтом, над которым я работаю. Портретный режим на Android выглядит следующим образом:

portrait Android

Теперь, пейзаж, нет css, изменение:

landscape Android

Никаких проблем. Следуйте за мной на следующем скриншоте, иллюстрирующем, что происходит на iOs Safari / Chrome в портретном режиме. Все отлично:

portrait iOs

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

landscape iOs

Я могу просматривать содержимое без проблем. Однако, когда я нажимаю ссылку на go на другую страницу, это происходит:

broken landscape iOs

Поведение страницы довольно простое: прокручиваемый контент находится внутри div, который является округлым, который не должен двигаться во время прокрутки. То, что происходит, - то, что округленный div установлен на 100% высоты экрана, и когда верхняя и нижняя навигационные панели появляются на iOs, округленный div не изменит свою высоту, чтобы приспособиться к используемой части экрана.

body css выглядит следующим образом:

body {
margin: 0; 
height: 100%; 
overflow: hidden; 
-webkit-text-size-adjust: 100%; }

, в то время как div с закругленными углами управляется следующим образом:

.rcorners {
position: absolute;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%-20px;
height: 100%-20px;
background-color: white;
border-radius: 10px;
-moz-box-shadow: 0 0 6px 2px #C0C0C0;
-webkit-box-shadow: 0 0 6px 2px #C0C0C0;
box-shadow: 0 0 6px 2px #C0C0C0;
overflow:hidden; }

Любые идеи о том, как сделать высоту правильной при каждом использовании экрана изменения размера?

Спасибо

1 Ответ

1 голос
/ 02 мая 2020

К сожалению, iOS печально известен такими вещами на протяжении многих лет. Сначала это была верхняя адресная строка, а теперь это меню браузера. Так что у вас есть пара вариантов. Вы можете установить медиа-запрос для ландшафта и сократить высоту этого контейнера и просто прокрутить его, если вам нужно. Может быть, возможно, уменьшить размер шрифта тоже. Или в этой статье есть несколько вариантов, которые могут помочь.

Вы также можете попробовать 100vh вместо этого. Поскольку это сделает всю высоту доступного окна просмотра, которое я видел, временами так, как мне нужно, против высоты 100%.

https://www.eventbrite.com/engineering/mobile-safari-why/

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