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

「樱花庄的白猫」原创文章：《解决移动端浏览器 vh 单位异常问题》，转载请保留出处！https://2heng.xin/2019/09/18/fix-100-vh-in-mobile-browser/

Q.E.D.

Comments

赏