在做一个响应式布局时用 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 */
}

Q.E.D.