不能直接替换，必须用@supports隔离并保留100vh降级；100dvh在ios 15及旧版微信浏览器中被忽略导致塌陷，100svh仅适用于启动页等静态场景且ios支持差，js fallback存在resize监听不全、横竖屏值过期等问题。
100dvh 能直接替换 100vh 吗？必须加 @supports
不能裸写 height: 100dvh。iOS 15 及更早、微信内置浏览器（基于旧版 WKWebView）、部分安卓 WebView 会完全忽略该声明，导致容器高度塌陷为 auto，页面直接“缩成一团”。
正确做法是用 @supports 隔离，同时保留降级路径：
/* 推荐写法：优先 dvh，fallback 到 vh */<br>.fullscreen {<br> min-height: 100vh;<br> height: 100vh;<br>}<br><br>@supports (height: 100dvh) {<br> .fullscreen {<br> height: 100dvh;<br> }<br>}
注意：min-height: 100vh 必须写在 @supports 外层，否则不支持环境连基础高度保障都没有。
别把 100dvh 和 100svh 写在同一声明块里——Safari 会整条规则忽略，不是只忽略其中一个。
100svh 适合什么场景？不是万能兜底
100svh 表示“最小视口高度”，即地址栏展开时的可视区域，它比 100vh 更保守，但和 100dvh 不是替代关系。
- 适合首屏加载瞬间就需稳定布局的场景，比如带 logo 和 CTA 的启动页——避免刚打开时按钮被地址栏盖住
- 不适合需要随滚动实时响应的交互容器，比如键盘弹出后要撑开的表单区，
100svh不会变高，内容仍可能被遮挡 - iOS Safari 对
svh支持极差（仅 iOS 16.4+ 实验性支持），且需配合<meta name="viewport" content="viewport-fit=cover">才可能生效，生产环境慎用
为什么不能只靠 JS 更新 --vh 变量？
手动用 JS 计算 --vh 并设为 window.innerHeight * 0.01 是常见 fallback，但它有硬伤：
- 只监听
resize不够：iOS Safari 地址栏收起时不触发resize，得额外监听scroll并节流，否则滚动中高度跳变 - 横竖屏切换后值过期：初始化一次
--vh，切回竖屏后仍用横屏的innerHeight，元素被拉伸或留白 - CSS fallback 写法极易出错：
calc(var(--vh, 1px) * 100)正确；calc(var(--vh, 1vh) * 100)错误——1vh是相对单位，无法参与 calc 数值运算，整条声明失效
键盘弹出时，100dvh 真的够用吗？
大多数情况下够用，但要注意两个边界：
- Android Chrome 100+ 和 iOS Safari 16.4+ 原生支持
dvh，键盘弹出会实时缩小100dvh值，容器自动收缩，输入框不会被盖住 - 微信内置浏览器（尤其旧版）可能不支持
dvh，此时降级到100vh仍会出问题——建议对关键输入区域单独加 JS 监听focus事件，临时改用height: 100%+overflow: auto容器兜底 - 不要依赖
100dvh做固定定位遮罩：iOS 上position: fixed+100dvh在某些滚动状态下仍可能漏底，真全屏遮罩建议 JS 动态设element.style.height = window.innerHeight + 'px'
动态视口单位不是开关一按就万事大吉的东西——dvh 的“动态”依赖浏览器实现，而不同 WebView 的 patch 节奏差异很大，最稳的方案永远是：用 @supports 明确分层，不支持时立刻切到可预测的降级逻辑，而不是指望一个变量能覆盖所有滚动、键盘、横竖屏组合状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
