在移动端应避免使用100vh

  • 2020-04-17
  • 0
  • 0

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

问题描述

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

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

如下所示:
Alvin's Blog

解决办法

  1. 在简单情况下可使用 100% 设置可视化预期高度;但 height:100% 在复杂场景下会有意外;
  2. 加全局样式:
    html, body {
        height:-webkit-fill-available;
    }
    
  3. 安装 vh-check 依赖;
  4. 通过 js 获取 window.innerHeight,并设置全局 css 变量;

评论

还没有任何评论,你来说两句吧