100dvh和100dvw可解决绝大多数移动端视口适配问题，css变量方案仅为兜底；--vh需动态监听resize等事件更新，初始化一次会导致横竖屏切换后布局错乱，且赋值必须为px单位、fallback须用绝对单位，不可用1vh参与calc运算。
直接用 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） - 临时调试可写
width: calc(100vw - 17px)，但注意不同系统滚动条宽度不一致（Windows 常为 17px，macOS 隐藏时为 0） - 全屏容器慎用
position: absolute+right: 0，若父容器没设overflow: hidden，它可能向右溢出 1px
哪些场景根本别碰 --vh 变量
--vh 只适合控制“容器级高度”，比如全屏页、模态框、固定定位导航栏。以下场景强行用它，等于自埋雷：
- 嵌套滚动区域里用
--vh算子元素高度 → 子元素实际高度受父容器overflow和滚动影响，和视口无关 - 动画中用
--vh做transform: translateY()→ 视口变化时变量来不及更新，动画跳帧、视觉撕裂 - 服务端渲染（SSR）页面首次加载时，JS 未执行，
--vh为初始值（常为空或无效），依赖它的布局会错乱 - 安卓部分定制系统（如华为 EMUI）
visualViewport.height返回异常，需加校验：if (v.height > 0 && v.height
真正难的不是写几行 JS 设置变量，而是覆盖所有边界：横竖屏切换瞬间的抖动、键盘弹出时的布局冻结、WebView 里事件缺失、老 iOS 的兼容降级路径。这些细节堆起来，才决定用户看到的是“刚好填满”，还是“忽长忽短”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
