100dvh不能直接替换100vh，因其在iOS 15及更早、微信/QQ等WebView中完全不被识别，CSS解析失败导致声明丢弃、页面塌陷；必须用@supports (min-height: 100dvh)检测并外置100vh兜底。
为什么100dvh不能直接替换100vh
因为 100dvh 在 iOS 15 及更早版本、微信内置 WebView（截至 2026 年 5 月）、QQ 浏览器等环境中完全不被识别，CSS 解析失败会直接丢弃整条声明，导致元素失去高度控制，页面塌陷或错位。这不是“部分生效”，而是“彻底失效”。
必须用 @supports (min-height: 100dvh) 显式检测支持性——注意：@supports (height: 100dvh) 无效，@supports (dvh: 1px) 更是非法语法。
-
min-height是唯一能触发 dvh 单位合法解析的属性；height和max-height不支持 dvh - 兜底必须写在
@supports外层，否则旧环境连100vh都拿不到 - iOS Safari 16.4+、Chrome 109+、Edge 109+ 支持，但 Safari 16.4–17.2 首屏可能闪动，需配合初始 layout 优化
svh 的适用场景和常见误用
100svh 不是 100dvh 的缩小版，它代表“地址栏强制展开时的最小可用高度”，数值固定，不会随滚动变化。适合对遮挡零容忍的 UI 区域，比如支付页底部按钮、弹窗确认区。
混用会出问题：比如同时写 height: 100dvh 和 padding-bottom: 20svh，两个单位基准不同（一个动态、一个锚定），结果不可预测。
立即学习“前端免费学习笔记（深入）”；
- 不要用
@supports (height: 100svh)做 dvh 回退——语义不匹配，逻辑错误 - 检测
svh要单独写：@supports (min-height: 100svh) - 安卓部分浏览器在横竖屏切换时
svh值更新滞后，建议避免用于依赖精确尺寸的 Canvas 或 Video 容器
微信等 WebView 环境必须 JS fallback
纯 CSS 方案在微信中必然失效，dvh 和 svh 都不认。必须监听 resize 事件（不是 scroll），动态注入 --vh 变量。
关键细节：键盘弹出也会触发 resize，需节流；变量未定义时 CSS 计算式会崩，所以必须带默认值。
- 初始化时立即执行：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 监听
resize，加 300ms 节流（iOS 连续触发高频） - CSS 中写：
min-height: calc(var(--vh, 1vh) * 100)，1vh是 fallback 的 fallback - 别在
scroll里反复读window.innerHeight——不准且伤性能
meta viewport 设置是所有方案的前提
再新的单位也跑在视口基础之上。<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 必须存在，否则 dvh 行为异常，尤其在刘海屏和地址栏收放逻辑上。
user-scalable=no 看似稳妥，实则干扰 Safari 地址栏自动隐藏，反而加剧跳变，除非业务强要求禁缩放，否则建议去掉。
-
viewport-fit=cover是关键，它让页面内容延伸到安全区域外，使 dvh/lvh/svh 锚点计算更可靠 - 漏掉
initial-scale=1会导致 iOS 默认按 980px 渲染，vh类单位全部失准 - 部分安卓浏览器在
orientationchange后dvh更新延迟，可结合screen.orientation事件手动触发重设
实际落地最易忽略的是：dvh 虽好，但它的“动态”只在支持它的浏览器里成立；而微信这类主流入口，JS fallback 不是备选，是刚需。别寄希望于“等 WebView 升级”，当前时间（2026年10月）微信仍未透出 dvh 支持。
