#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. Спасибо за ответ! К сожалению, я добавил эти стили и получил тот же результат.