Есть несколько способов, которыми вы можете это сделать. Во-первых, вы можете просто использовать таблицу, которая заполняет весь видовой экран, чтобы каждый элемент был равномерно распределен при переключении ориентации. Вы также можете решить это, используя простой CSS, чтобы у вас было больше контроля и возможность использовать медиа-запросы.
Смотрите эту работу fiddle
Сначала вы хотите, чтобы обернуть все содержимое в одном родительском контейнере, который заполняет весь вид. Это предотвратит доступ содержимого из-за внешнего вида.
HTML
<div class="wrapper">
<div class="menu">
The Menu
</div>
<div class="hero">
The Hero
</div>
<div class="head">
Text
</div>
<div class="content">
This is content.
</div>
</div>
CSS
.wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
Здесь вы можете установить каждый элемент брать определенный процент от родительского контейнера, так что перемасштабирования пересчитывает элементы пропорции вместо форсирования свитка.
.menu, .hero, .head, .content {
position: absolute;
left: 0;
width: 100%;
}
.menu {
top: 0;
height: 10%;
background: #eee;
}
.hero {
top: 10%;
height: 20%;
background: #aee;
}
.head {
top: 30%;
height: 10%;
background: #eae;
}
.content {
top: 40%;
height: 60%;
background: #eea;
}
Реализация его таким образом позволит вам иметь немного больше контроля за поведением каждого элемента, как изменяется размер представления.
Я думаю, что вместо 100% он может работать лучше, если вы использовали 100vh, а также настроили тело на переполнение: hidden; – Benneb10
извините, но он не работает. –
Боюсь, это невозможно без js. iOS в ландшафтном режиме резервирует пару пикселей поверх высоты документа для навигационных панелей. Также имейте в виду, что загрузка страницы в ландшафтном режиме приводит к тому, что навигационная система ОС уже видна, а переход в альбомный режим приводит к просмотру «полноэкранного режима» без навигации. Для этого есть обходные пути, но на данный момент для этого требуется javascript. – duvigneau