移动端浏览器 vh 单位异常问题

作者: zengde 分类: web前端 发布时间: 2021-07-02 08:24

在做一个响应式布局时用 vh 单位定义了元素的高度,结果在发现在移动端的 Chrome 和 Firefox 浏览器中,浏览器 URL 栏显示的情况下元素都出现了错位。

查找到原因是移动端下浏览器对 100vh 的定义不考虑 URL 栏的高度(无论 URL 栏显示还是隐藏),可以用下面这张图直观地体现问题:

左侧是我们期望的 100vh “全屏”的高度,但右侧是 URL 栏显示的状态下“全屏”的高度,100vh 在这时已经超出了“全屏”高度。

对此,Google 官方有说明,bugzilla 有相关报告,但是对于我们解决问题没有任何帮助。

目前找到最好的解决方案是项目:

JS 执行过一次初始化 vhCheck() 后,就可以直接用 CSS 变量 –vh-offset 修正 100vh 了。

用法:

npm install vh-check
import vhCheck from 'vh-check'
vhCheck()
main {
  height: 100vh;
  /* 兼容不支持 var 变量的浏览器 (<= IE11) */
  height: calc(100vh - var(--vh-offset, 0px));
  /* 修正后的 100vh */
}

 

# 商业转载请联系作者获得授权,非商业转载请注明出处。
# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
# 协议(License):署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
# 作者(Author):Mashiro
# 链接(URL):https://2heng.xin/2019/09/18/fix-100-vh-in-mobile-browser/
# 来源(Source):樱花庄的白猫