原文摘要

作为一名前端开发者，我们一定都遇到过这样的需求：实现一个占满整个屏幕的欢迎页、弹窗蒙层或者一个 fixed 定

原文链接

进一步信息揣测

• 移动端浏览器视口动态变化机制：移动端浏览器（如iOS Safari、Chrome Mobile）的地址栏和工具栏会随着页面滚动动态显示/隐藏，导致100vh实际计算的是包含隐藏工具栏的完整视口高度，而非当前可视区域高度，从而引发布局溢出问题。
• CSS 100vh的浏览器兼容性黑名单：部分移动端浏览器（如早期Android WebView）对vh单位的实现存在缺陷，可能直接忽略或错误计算，需通过-webkit-fill-available等私有属性兜底。
• 业界替代方案的内幕：
• 使用window.innerHeight通过JS动态计算高度是常见方案，但会触发重排（reflow），性能敏感场景需谨慎；
• 高级技巧：CSS自定义属性（--vh）结合JS监听resize事件，将计算值赋给:root，可减少性能损耗（但需注意防抖）。
• 隐藏的CSS单位dvh（Dynamic Viewport Height）：2022年后主流浏览器已支持，可自动适应动态视口变化，但旧版本兼容性需通过@supports检测降级处理。
• 移动端滚动条陷阱：部分浏览器（如iOS）默认隐藏滚动条但仍保留滚动空间，导致100vh元素底部被截断，需额外设置overflow: hidden或position: fixed。
• 付费工具链的优化方案：部分企业级UI框架（如Figma插件、Webflow）内部使用postcss-viewport-units插件自动修补vh问题，但需订阅高级版本。
• 设计师与开发者的认知差：设计师常默认“全屏=100vh”，实际需提前沟通移动端差异，避免后期返工。