原文摘要
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 的时候，可能依旧有兼容性问题。
「最后」
虽然是以指出热榜第一文章的一些错误结尾，但是原文本身能带给我们的知识还是非常有用的。让我们能在遇到对应问题的时候同时了解到「新」「旧」两种不同解决方案。
当然，在实践中其实并不止这两种方案，大家知不知道还有哪些？
「关注关注关注」
本系列文章均来自同名公众号：pany 的路边拾遗，欢迎大家微信搜索加关注~
另外，我建立了一个该公众号对应的群聊，如果你感兴趣，欢迎公众号后台私信关键字加群或加我微信联系我加群 pany-ang
进一步信息揣测
- 移动端浏览器对100vh的处理存在隐藏机制：不同浏览器对动态视口（如地址栏、工具栏）的渲染策略不同，部分浏览器会将100vh计算为包含动态区域的完整高度，而非可视区域高度，导致滚动条出现。这一行为通常不会在官方文档中明确说明，需通过实际测试或社区经验总结。
- JS解决方案的性能陷阱：虽然使用
innerHeight和CSS变量可以解决100vh问题，但直接监听resize事件会频繁触发重绘，可能引发性能问题。业内更推荐结合防抖（debounce）或节流（throttle）优化，但具体阈值（如原文的100ms）需根据项目实际性能需求调整。 - CSS新特性的兼容性风险：作者提到的终极方案（如
dvh单位）属于较新的CSS规范，实际支持度可能因浏览器版本或厂商差异而不同。内部团队通常会维护一份兼容性对照表，或通过渐进增强（如fallback到JS方案）避免线上事故。 - 动态视口变化的未公开细节：某些移动端浏览器在滚动时动态调整视口高度（如地址栏隐藏），但这一行为可能因系统版本或浏览器引擎（WebKit/Blink）存在差异，需通过真机调试或内部工具（如浏览器开发者模式的模拟器）验证。
- CSS变量回退技巧的实战价值：使用
var(--vh, 1vh)提供回退值的做法，是经过大量项目验证的稳健策略，可避免变量未定义导致的布局崩溃。这一技巧在复杂项目中尤为重要，但较少被新手文档提及。 - 社区热门文章的潜在局限性：掘金等平台的技术文章可能因时效性（如浏览器更新）或作者个人经验存在偏差，业内资深开发者通常会交叉参考MDN、CanIUse及内部技术报告，而非完全依赖单一来源。