100dvh和100dvw能解决绝大多数视口单位问题，css变量方案仅为兜底；因其无法自动响应地址栏收起、软键盘弹出或横竖屏切换导致的window.innerheight变化，需监听resize（及必要时scroll）并节流，且--vh必须设为px单位值（window.innerheight0.01），css中用calc(100var(--vh,1px))并叠加100dvh/100vh双fallback。
直接用 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 里会被忽略，整条声明失效
100dvw 解决滚动条宽度干扰
桌面端 100vw 包含滚动条宽度，导致容器实际超出视口，触发意外水平滚动；移动端部分 WebView（如微信内置浏览器）也会复现该问题。这不是 CSS 变量能修的，得靠单位升级或显式修正。
-
100dvw：Chrome 108+、Safari 16.4+ 已支持，自动排除滚动条占位 - 不支持时，可用
width: 100%替代，但前提是html和body没被其他样式干扰（比如未重置的margin或padding） - 临时调试可写，但注意不同系统滚动条宽度不一致（Windows 常为
17px，macOS 隐藏时为0） - 全屏容器慎用
right: 0，若父容器没设overflow: hidden，它可能向右溢出1px
真正难的不是写几行 JS 设置变量，而是让所有设备、所有 WebView 环境下都保持 window.innerHeight 更新时机与 CSS 计算节奏严格同步——尤其在软键盘弹出瞬间，iOS 和 Android 的触发顺序、延迟、是否重绘，差异极大。这点没法靠文档覆盖，只能靠真机反复测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
