100dvh能动态适配滚动状态，因其表示当前视觉视口高度的100%，随地址栏收起/展开、键盘弹出实时变化；而100vh绑定初始布局视口，滚动后不更新，导致错位。
直接用 100dvh 替换 100vh 就能解决滚动时地址栏收起导致的遮挡或留白，但不加 @supports 包裹会炸——iOS 15、微信 X5 内核等环境整条规则被丢弃，高度塌成 auto。
为什么 100dvh 能动态适配滚动状态
100dvh 表示「当前视觉视口高度的 100%」，它随 Safari 地址栏收起/展开、软键盘弹出/收起实时变化。而 100vh 绑定的是初始布局视口（含地址栏），滚动后不会更新，导致容器高度与实际可视区错位。
- iOS 滚动中地址栏收起 → 可视高度增加约 60–100px →
100dvh自动增大，内容不悬空 - 软键盘弹出 → 视口压缩 →
100dvh缩小，避免底部 input 被盖住 - Chrome 100+、Firefox 103+、Safari 16.4+ 原生支持；旧版 Safari（如 iOS 15）完全不识别
dvh
@supports (min-height: 100dvh) 必须写对位置
不能把兜底和新单位写在同一规则里，也不能只靠层叠顺序“覆盖”——Safari 会整条忽略包含未知单位的声明块。
- ✅ 正确：兜底写在
@supports外层，新单位在内层 - ❌ 错误：
height: 100vh; height: 100dvh;—— iOS 15 直接跳过整行 - ❌ 错误：
@supports (height: 100dvh) { height: 100dvh; }—— 没兜底，老设备无高度控制 - ⚠️ 注意：
@supports必须检测min-height: 100dvh，不是height；规范不支持height使用dvh单位
.full {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.full {
min-height: 100dvh;
}
}
别误用 100svh 或 100lvh 替代 100dvh
100svh 是保守锚点值（地址栏+工具栏全展开时的最小高度），100lvh 是理论最大值（地址栏强制隐藏），两者都不随滚动变化，无法解决动态遮挡问题。
-
100svh在地址栏收起后反而比实际可视区小 → 容器底部大面积留白 -
100lvh初始加载时若地址栏还开着，容器可能直接被顶部遮住 - 看到“svh”就拿来替换“vh”？大概率让页面更错乱
- 真正需要动态响应的场景，只认
100dvh—— 它是唯一实时单位
当 CSS fallback 失效时，JS 是唯一出路
微信 X5 内核、iOS 15 等环境连 @supports 都不支持 dvh，此时必须 JS 补救。但监听 scroll 是错的——地址栏显隐触发的是 resize，不是 scroll。
- 监听
resize和orientationchange（横竖屏切换也影响视口） - 首次执行必须等 DOM ready，否则
window.innerHeight可能取到初始错误值 - 用
requestAnimationFrame节流，避免 resize 高频触发卡顿 - 设 CSS 变量：
document.documentElement.style.setProperty('--dvh', `${innerHeight}px`)，CSS 中用min-height: var(--dvh)
复杂点在于：不同机型地址栏高度差异大，且键盘弹出后部分安卓 WebView 不发 resize；这时候得结合 focus/blur + visualViewport API 做二次校准——但绝大多数项目，@supports + 100dvh 已覆盖 95% 场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
