Hello，又见面了，我是 pany。
今天在掘金社区看见前端文章榜第一的这篇文章《别再用 100vh 了！移动端视口高度的终极解决方案》
原文链接
我们一起来学习一下。
「作者抛出问题」
文章开头提到了一个历时已久的 CSS 兼容性问题：100vh 在移动端设备上会出现滚动条，就像作者演示的这样（注意看页面右侧有滚动条）：
「作者分析问题」
我将上面作者的分析过程转化为方便用户理解的图片是这样的：
当然，不同的浏览器对应的动态区域可能会有所不同，有些是在是在上面，有些是在下面。
到这里，想必大家应该能更清晰的理解 “100vh 在移动端设备上会出现滚动条” 是怎么一回事了。
「作者给出过时的解决方案」
这个方案巧妙的利用了 JS innerHeight 的值充当最终的 100vh，并且还非常细心的在使用 CSS 变量的时候传入了第二个可选参数 1vh 作为兜底的回退值，这样能保证在 --vh 失效时整个表达式不出现错误。
但作者也提到了一个问题：监听 resize 事件过于频繁，可能会引发性能问题。这其实很好解决，我们在原基础上补充一个防抖（debounce）就好了：
function setRealVH() {
const vh = window.innerHeight;
document.documentElement.style.setProperty('--vh', `${vh * 0.01}px`);
}
window.addEventListener('resize', debounce(setRealVH, 100));
「作者给出终极的解决方案」
在原文描述中：
使用 100dvh，当地址栏收起时，元素高度会平滑地增加以填满屏幕；当地址栏滑出时，元素高度又会平滑地减小。整个过程如丝般顺滑，没有任何滚动条，完美！
出现了 “平滑” 这个词，但 dvh 的单位变化不是平滑动画，而是瞬间切换。
并且这个方案现阶段还不能称为「终极方案」，毕竟作者自己也提到了兼容性问题：
但是这里，这位作者出现了一个「错误」
他认为从 2023 年开始截止到 2025 年，所有主流现代浏览器都兼容了，就代表着「兼容性非常理想」
这其实是一个在开发实践或者技术调用中不应该犯的错误，我们需要知道的是 CSS 属性的兼容性还应该根据当前主流浏览器版本用户量占比来判断。
108 版本的 Chrome 浏览器是在 2022 年 12 月 1 日发行的，和它最近的一个安卓版本是 2022 年 8 月 15 日发行的 Android 13
也就是说，大概需要默认搭载 Android 14 系统的手机才可以无风险的使用 dvh 属性，但是截止 2025 年 4 月 Android 14、15 两个版本的占比大约在 32%，10 ~ 13 四个版本的占比大约在 55%。也就是说用户在使用默认浏览器或 webview 的时候，可能依旧有兼容性问题。
「最后」
虽然是以指出热榜第一文章的一些错误结尾，但是原文本身能带给我们的知识还是非常有用的。让我们能在遇到对应问题的时候同时了解到「新」「旧」两种不同解决方案。
「关注关注关注」
如果文章对你有帮助，记得点赞、收藏、评论和关注！
