不能，100dvh不能直接替换100vh，需用@supports(min-height:100dvh)检测并兜底100vh，且微信WebView等环境不支持dvh，必须JS fallback。
100dvh 能直接替换 100vh 吗？不能，必须加 @supports 检测
直接写 min-height: 100dvh 会炸——iOS 15 及更早版本、微信内置 WebView（截至 2026 年 5 月）、QQ 浏览器等环境压根不认识 dvh，CSS 解析失败后会丢弃整条声明，退回到无高度控制状态。
稳妥写法是先兜底 min-height: 100vh，再用 @supports 升级：
.full-height {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.full-height {
min-height: 100dvh;
}
}-
@supports必须精确匹配单位语法，写成@supports (height: 100dvh)无效（height不支持dvh，只支持min-height/max-height） - 别试图用
@supports (dvh: 1px)—— 这不是合法检测方式 - 如果项目需兼容微信，仅靠 CSS 不够，得 fallback 到 JS 方案（见最后一条）
svh 和 lvh 不是 dvh 的“备选”，它们语义完全不同
看到 100svh 就以为是“更小的 dvh”？错。三者计算逻辑和适用场景完全隔离：
-
100svh= 地址栏**强制显示时**的最小可用高度，适合支付页底部按钮、弹窗确认区——确保永远不被遮挡 -
100lvh= 地址栏**强制隐藏时**的最大高度，适合全屏视频、Canvas 绘图——但滚动初期可能被地址栏盖住顶部 -
100dvh= 当前**实时可视区域高度**，适合轮播图容器、固定底栏——滚动时自动响应
混用会导致布局错乱。比如在同一个组件里同时写 height: 100dvh 和 padding-bottom: 10svh，数值基准不同，结果不可预测。
立即学习“前端免费学习笔记（深入）”；
为什么监听 scroll 无法正确更新视口高度？因为触发的是 resize
iOS Safari 地址栏显隐不触发 scroll，而是触发 resize 事件。只监听 scroll 会导致高度滞后甚至完全不更新。
JS 兜底方案必须这样写：
function updateVh() {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
}
updateVh(); // DOM 加载完立即执行一次
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(updateVh, 300); // iOS 连续 resize 高频，必须节流
});- CSS 中要用
calc(100vh * var(--vh))或min-height: calc(100vh * var(--vh))，不能直接写min-height: calc(100 * var(--vh))（缺单位会失效） -
window.innerHeight在 iOS Safari 中有 1–2 帧延迟，首次渲染可能闪动，所以首屏建议仍优先走 CSSdvh+@supports
微信 WebView 是最大兼容黑洞，dvh 几乎不可用
截至 2026 年 5 月，微信内置浏览器（X5 内核）仍未透出 dvh 支持，@supports (min-height: 100dvh) 返回 false。这意味着：哪怕用户用的是 iOS 17.4 的 Safari，只要在微信里打开，dvh 就彻底失效。
真实项目中，若微信流量占比高，必须做双路径：
- 现代浏览器（Safari 16.4+、Chrome 109+）→
@supports+dvh - 微信/QQ/旧版 iOS → JS
resize监听 + CSS 变量注入 - 千万别省略 JS fallback，否则微信里 100vh 页面底部大面积留白或内容被截断
动态视口适配真正的难点不在语法，而在环境碎片化——dvh 是解药，但你得先确认病人真能吞下去。
