100dvh不能裸用，因ios 15及更早、微信/qq webview等不支持，需@supports检测并回退100vh；svh/lvh/dvh语义不同，须分别检测；js监听resize+节流是跨平台唯一稳定方案。
直接用 100dvh 会炸掉 iOS 15 及更早版本、微信 WebView、QQ 浏览器等大量真实用户环境——必须加 @supports 检测 + 100vh 回退，否则页面高度直接丢失。
为什么 100dvh 不能裸用？
截至 2026 年 7 月，dvh 支持仍受限于浏览器内核版本和 WebView 实现：
- iOS Safari 16.4+ 才开始支持，iOS 15 及更早版本完全不识别该单位（解析为无效值，
min-height失效） - 微信内置 WebView、QQ 浏览器、部分安卓定制壳未透出
dvh支持（即使底层 Chromium 版本够新，WebView 层也常禁用） - Safari 16.4–17.2 存在首屏渲染时机问题：首次计算
100dvh时地址栏状态未稳定，可能短暂取到错误高度，导致闪动
@supports 必须按单位单独检测
svh、lvh、dvh 是独立特性，彼此不互为子集，不能共用一个检测块：
- 写
@supports (min-height: 100dvh)只能保dvh，不能顺带覆盖svh或lvh - 若同时用
100svh和100dvh，需分别写两段@supports块 - 错误写法：
@supports (min-height: 100dvh), (min-height: 100svh)—— 多条件是“与”关系，任一不支持就整个块失效
稳妥写法示例：
.full-height {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.full-height {
min-height: 100dvh;
}
}
@supports (min-height: 100svh) {
.safe-fixed-bottom {
height: 100svh;
}
}
svh 和 lvh 不是 dvh 的降级方案
三者语义完全不同，混用会导致布局错位：
-
100svh= 地址栏**始终显示**时的最小高度，适合支付页底部按钮这类“绝不能被遮挡”的元素 -
100lvh= 地址栏**完全隐藏**时的最大高度，适合全屏视频，但滚动初期内容可能被地址栏盖住 -
100dvh= 当前实时可视高度，适合轮播图、固定底栏等需响应式变化的场景 - 三者数值关系通常是：
100svh ，强行用 <code>100lvh替代100dvh在地址栏展开时会撑高容器，造成底部留白
真兜底：JS 方案绕过所有 CSS 兼容问题
当你的用户大量使用微信或 QQ 内置浏览器时，CSS 方案大概率失效，JS 是目前唯一跨平台稳定的解法：
- 监听
resize事件（不是scroll），iOS 地址栏显隐会触发它 - 在
DOMContentLoaded后立即执行一次初始化：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 对
resize加 300ms 节流（iOS 连续触发高频，不节流会卡顿） - CSS 中必须用
calc(100 * var(--vh))，避免变量未定义时整个表达式失效
复杂点在于：dvh 虽好，但无法覆盖所有 WebView 环境；而 JS 方案看似重，却是目前唯一能稳定跨平台响应地址栏变化的方式——尤其当你的用户大量使用微信或 QQ 内置浏览器时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
