Я хочу создать адаптивный сайт для мобильных устройств. Как я могу контролировать свой рост при создании страниц с идеальными пикселями?
Как вы, возможно, знаете, блоки просмотра не поддерживаются в мобильных браузерах, это известная проблема.
- Я не могу использовать
vw или vh, потому что они не поддерживаются
- Я не могу использовать
%, потому что мне нужно установить высоту для родительского элемента
- Я не могу использовать
px или любые статические единицы, потому что я строю адаптивный дизайн
Я кое-что собрал, чтобы вы поняли лучше:
* {
margin: 0;
}
#page1 {
height: 100vh;
}
#top {
height: 30%;
background: #ddd;
}
#bottom {
height: 70%;
background: #ccc;
}
#page2 {
height: 100vh;
}
#page3 {
height: 100vh;
}
<body>
<div id="page1">
<div id="top">This is the top of page1. Its height should be 30% of 100vh
</div>
<div id="bottom">This is the bottom part of page1. Its height should be 70% of 100vh</div>
</div>
<div id="page2"> This is page 2 and is also 100vh high</div>
<div id="page3"> This is page 3 and is also 100vh high</div>
</body>
Теперь это было бы вполне нормально на ПК, но на мобильном телефоне, он начинает нервничать, когда адресная строка скрывается / показывает, и это недопустимо.
Так есть ли альтернативы для vh единицы?
Спасибо, Эйдан