@supports 必须用 min-height 检测 dvh/lvh/svh，如 @supports (min-height: 100dvh)；dvh 仅限 min-height/max-height，height 中无效；微信/qq webview 不支持，需 js fallback 监听 resize。
@supports 必须精确匹配 min-height 才能生效
直接写 @supports (height: 100dvh) 是无效的——dvh 只被允许用于 min-height 和 max-height，不能用于 height。浏览器会直接忽略整个 @supports 块，导致降级失败。
正确写法必须是：
.full-height {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.full-height {
min-height: 100dvh;
}
}
-
@supports (min-height: 100svh)和@supports (min-height: 100lvh)同理，都只能用min-height检测 - 别试
@supports (dvh: 1px)—— 这不是合法语法，所有浏览器都会跳过 - Chrome 109+ 和 Safari 16.4+ 支持
dvh，但 iOS 15 及更早版本、微信 WebView（截至 2026 年 5 月）、QQ 浏览器等完全不识别该单位，CSS 解析失败后会丢弃整条声明
lvh 和 dvh 不是互换关系，混用会出布局错乱
100lvh 表示“地址栏强制隐藏时的最大高度”，100dvh 表示“当前实时可视高度”，二者基准不同、触发时机不同、数值也不同。在同一个组件里同时用 height: 100dvh 和 padding-bottom: 10lvh，结果不可预测。
-
100lvh适合全屏视频、Canvas 绘图类场景，但滚动初期可能被地址栏盖住顶部 -
100dvh适合轮播图容器、固定底栏等需要随滚动实时响应的场景 -
100svh是最小安全高度，适合支付页底部按钮、弹窗确认区——确保永远不被遮挡 - 不要试图用
@supports (min-height: 100lvh) and (not (min-height: 100dvh))做 fallback，这没有意义：支持lvh的环境基本也支持dvh，且语义冲突
微信和 QQ 内置浏览器必须 JS fallback
CSS 层面的 dvh 在微信 WebView 中至今未透出支持（2026 年 5 月实测仍不识别），仅靠 @supports 无法兜底。必须引入 JS 方案，且关键点是监听 resize 而非 scroll —— iOS Safari 地址栏显隐只触发 resize，监听 scroll 会导致高度滞后甚至完全不更新。
- 在
DOMContentLoaded后立即执行：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 监听
resize，加 300ms 节流（iOS 连续 resize 高频） - CSS 中必须写：
height: calc(var(--vh, 1vh) * 100)，避免变量未定义时整个计算式失效 - 不要在
scroll回调里反复读取window.innerHeight—— 性能差，且 iOS 下值可能未及时更新
软键盘弹出时 dvh 也不一定可靠
Android Chrome 和部分 WebView 在软键盘弹出时，dvh 更新有延迟或不触发，尤其在低端机型或旧版 WebView 中。此时 100dvh 仍按地址栏收起后的高度计算，而实际可视区域已被键盘压缩，导致内容被遮挡。
- 登录页、表单页这类强交互场景，建议优先用
100svh+@supports检测，它始终取最小视口高度，天然规避键盘遮挡 - 若必须用
dvh，需额外监听focusin/focusout事件，在输入框聚焦时手动调整容器高度 - 不要给
或直接设height: 100vh或100dvh，iOS 容易触发滚动异常或页面卡死
真正难的不是写对 @supports，而是判断什么时候该放弃 CSS 方案、切到 JS fallback —— 尤其当你的用户大量使用微信或 QQ 内置浏览器时，dvh 从一开始就没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
