Html 100vh和移动响应设计

我想为手机建立一个快速响应的网站。在构建像素完美页面时，我如何控制自己的高度

您可能知道，移动浏览器不支持视口单元，这是一个已知的问题

• 我无法使用

  vw

  或

  vh

  ，因为它们不受支持
• 我不能使用

  %

  ，因为我需要为父元素设置高度
• 我不能使用

  px

  或任何静态单元，因为我正在构建一个响应性设计

我把一些东西放在一起，让你有个更好的主意：

*{
保证金：0；
}
#第1页{
高度：100vh；
}
#顶{
身高：30%；
背景：ddd；
}
#底部{
身高：70%；
背景：#ccc；
}
#第2页{
高度：100vh；
}
#第3页{
高度：100vh；
}

这是第一页的顶部。其高度应为100vh的30%
这是第1页的底部。其高度应为100vh的70%
这是第2页，也是100vh高
这是第3页，也是100vh高

支持Vw和Vh。您只需要添加这个元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

---

支持CSS单元vh和vw，但在移动设备上，地址栏是问题所在。当使用根元素高度：100vh时，此元素的底部不在视口中。我的解决方案：

1.）在根div style.height=window.innerHeight+'px'的调整事件集上； 这会使根div完全可见，但地址栏会占用大量空间（尤其是横向）

2.）CSS:body:{height:150vh}和root元素：{position:fixed}

---

这允许“假”滚动，用户可以隐藏或显示地址栏，并且根元素的内容在大小更改时会进行调整。

是的，我使用了所有元标记，但我没有将它们包括在示例中。下面是关于这个问题的更多细节：我认为你可以用javascript来做，看这里：它仍然不是你所期望的行为+它唯一的Chrome，因此它几乎不适用于现实生活中的生产（仍然需要担心其他浏览器+iOS）。我已经读到，你可以用JS来做，但还没有找到任何有效的解决方案。另外，当你想让一个元素占据你vh的30%时，当URL栏消失时，它也会改变该元素的高度。。这真的令人沮丧…我知道有一些技术可以在IOS上隐藏url栏，但我从未在Android上成功过。。还有一些库可以切换到全屏，但我从未测试过