100dvh/dvw能解决多数动态视口问题，css变量方案仅作兜底；因--vh需监听resize等事件实时更新，否则横竖屏切换或地址栏收起后值过期，导致布局撕裂，且fallback必须用带px单位的数值和双层回退。
直接用 100dvh 和 100dvw 就能解决绝大多数问题，CSS 变量方案只是兜底手段——它本质是手动模拟浏览器原生行为，写错一行、漏一个节流、少一层 fallback，就会在华为 EMUI、微信 WebView 或老 iOS 上出视觉撕裂。
为什么不能只靠 --vh 初始化一次
移动端地址栏收起、软键盘弹出、横竖屏切换都会改 window.innerHeight，但 CSS 变量不会自动更新。只在 DOMContentLoaded 里设一次 --vh，后续所有布局就基于那个过期值——比如横屏切回竖屏后，--vh 还是旧的宽高比对应值，导致元素被拉伸或底部留白。
必须监听 resize 事件（iOS 对 orientationchange 支持不稳定，resize 更可靠）；某些 iOS 版本地址栏收起时不触发 resize，需额外监听 scroll，但要节流，避免卡顿；首次渲染前就要执行设置逻辑，否则白屏阶段用的是 1px 兜底，可能极短时间闪动。
--vh 的正确赋值和 CSS fallback 写法
JS 中设变量时，值必须是带 px 单位的数值，且是 window.innerHeight * 0.01（即 1% 高度），不是直接塞 vh 单位；CSS 中用 calc() 乘以 100，且 fallback 必须是绝对单位（如 1px），不能是 1vh——因为 1vh 是相对单位，无法参与 calc 数值运算。
- JS 正确写法：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - CSS 正确写法：
height: calc(100 * var(--vh, 1px))，不是calc(var(--vh, 1vh) * 100) - 必须双层回退：
height: 100dvh; height: calc(100 * var(--vh, 1px)); height: 100vh; - 千万别写
calc(var(--vh, 1vh) * 100)——1vh在 fallback 里会被忽略，整条声明失效
滚动条宽度干扰 vw 的真实表现
桌面端 100vw 包含滚动条宽度，导致容器实际超出视口，触发意外水平滚动；移动端部分 WebView（如微信内置浏览器）也会复现该问题。这不是 CSS 变量能修的，得靠单位升级或显式修正。
100dvw：Chrome 108+、Safari 16.4+ 已支持，自动排除滚动条占位；不支持时，可用 width: 100% 替代，但前提是 html 和 body 没被其他样式干扰（比如未重置的 margin 或 padding）；临时调试可写，但注意不同系统滚动条宽度不一致（Windows 常为 17px，macOS 隐藏时为 0）；全屏容器慎用 +right: 0，若父容器没设 overflow: hidden，它可能向右溢出 1px。
真正容易被忽略的点是：安卓部分定制系统（如华为 EMUI）visualViewport.height 返回异常，必须加校验；--vh 只适合控制“容器级高度”，嵌套滚动区域里用它算子元素高度会翻车；服务端渲染页面首次加载时，JS 未执行，--vh 为初始值（比如 100vh），可能造成布局偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
