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

#html #css #ios #ipad #responsive-design

#HTML #css #iOS #iPad #адаптивный дизайн

Вопрос:

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

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

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

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

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

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

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

Ответ №1:

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

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

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

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

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

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

Комментарии:

1. Спасибо за ответ! К сожалению, я добавил эти стили и получил тот же результат.