HTML-элементы не меняют ширину на iPad pro при повороте в альбомную ориентацию

Чтобы продемонстрировать эту проблему, у меня есть очень простая веб-страница с одним элементом div с шириной, установленной на 100%, и цветом фона для проверки его ширины. На большинстве устройств, на которых я это просматривал (ПК, смартфоны, планшеты), все ведет себя именно так, как ожидалось. Однако у меня есть iPad pro 11, который правильно отображает страницу в портретном режиме в Chrome:

Портретный режим

Но при повороте в ландшафтный режим он сохраняет ту же ширину в пикселях и не расширяется до 100% от новой ширины:

Ландшафтный режим

Я пытался искать эту проблему часами, но, похоже, так и не встретил никого с моей точной проблемой. Я сталкивался с многочисленными ответами, в которых говорилось о внесении различных изменений в тег ‹meta name=viewport ... /›, все из которых я пробовал безрезультатно. Как будто вращение устройства не сообщает браузеру, что размеры окна просмотра изменились. Я новичок в интерфейсном веб-дизайне и очень новичок в адаптивном дизайне для мобильных устройств, но кажется, что для моих нужд здесь должно хватить чего-то простого, например, встроенного стиля для ширины 100%.

Может ли кто-нибудь предложить некоторые рекомендации?

РЕДАКТИРОВАТЬ: я обнаружил, что могу сначала загрузить страницу в ландшафтном режиме и получить желаемую ширину 100%, но затем, когда я поворачиваюсь в портретную, у меня возникает противоположная проблема - элемент выходит вправо за край экрана. И опять же, похоже, это происходит только на этой конкретной модели iPad (Pro 11).


ios html ipad css responsive-design
person BradMJustice    schedule 15.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Моя уловка, позволяющая всегда заставлять тело HTML занимать всю страницу, в то время как дети могут вести себя ответственно, заключается в следующем:

body { 
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}

Тогда дочерний div внутри тела может быть:

div {
    background: red;
    height: 20px;
    width: 100%;
}

Хитрость здесь в основном заключается в том, чтобы заставить тело реагировать на область просмотра браузера и позволить дочерним элементам течь внутри тела.

Совет: попробуйте освежить модель CSS3 Flex and Grid, которая в настоящее время является нормой и позволит вам реализовать гибкие макеты.

person Roman Jaquez    schedule 15.09.2020
comment
Спасибо за ответ! К сожалению, я добавил эти стили и получил тот же результат. - person BradMJustice; 15.09.2020