我想为移动设备建立一个响应式网站。在构建像素完美的页面时，如何控制自己的高度？
您可能知道，移动浏览器不支持视口单元，这是一个已知问题。
- 我无法使用
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>现在这在 PC 上完全没问题，但在移动设备上，当地址栏隐藏/显示时它会变得跳跃，这是不可接受的。
那么vh单位有什么替代品吗？
谢谢，艾丹
支持Vw和Vh。您只需要添加此元标记
<meta name="viewport" content="width=device-width, initial-scale=1.0">
支持CSS单位vh和vw，但在移动设备上，地址栏是问题所在。当您用于根元素高度：100vh 时，此元素的底部不在视口中。我的解决方案：
1.( 在为根div 样式设置的调整大小事件上，高度 = 窗口.内部高度+'px'; 这使您的根div完全可见，但地址栏占用大量空间(尤其是在横向方向上(
2.( CSS：正文：{高度：150vh} 和根元素：{位置：固定} 这允许"假"滚动，用户可以隐藏或显示地址栏，当大小更改时，根元素的内容会适应。