在移动端应避免使用100vh

CSS 中的视口单位(vh)听起来很棒。 如果要设置元素的样式以占据整个屏幕的高度，则可以设置 height: 100vh，就可以拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！但是 100vh 在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。 最好避免 100vh，而是依靠 javascript 设置高度以获得完整的视口体验，或者在特殊情况下可以使用 100%。

问题描述

在手机端设置 height:100vh 时，在 Chrome 等 PC 浏览器上模拟是正常的；实际移动设备真机浏览的时候 100vh 的高度会超过窗口的实际高度，并显示滚动条。

原因在于移动浏览器上（我测试的是 Chrome 和 Safari）具有地址栏，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。 这些浏览器没有将 100vh 高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为浏览器的高度，并隐藏了地址栏。 结果是，当地址栏可见时，页面的可视化区域不止一屏。

如下所示：

解决办法

1. 在简单情况下可使用 100% 设置可视化预期高度；但 height:100% 在复杂场景下会有意外；
2. 加全局样式：

html, body {
    height:-webkit-fill-available;
}

3. 安装 vh-check 依赖；
4. 通过 js 获取 window.innerHeight，并设置全局 css 变量；

视窗单位在移动端上的使用技巧

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： Alvin
• 本文链接： https://alvinyw.github.io/2020/04/1/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！