Chrome默认使用dvh（动态视口高度），实时响应地址栏/键盘变化；Safari早期仅稳定支持svh（最小视口高度），保守且不随滚动变化，dvh直至Safari 17.5才稳定支持。
Chrome 和 Safari 对 dvh/svh 的解析逻辑根本不同
dvh 和 svh 不是“同一套单位在两个浏览器里的实现差异”，而是规范里定义的三个独立视口层级，Chrome 和 Safari 选择锚定的基准层不一样。Chrome 默认用 dvh（dynamic viewport height），即实时响应地址栏收起/键盘弹出后的**当前可见高度**；而 Safari（尤其 iOS 16.4–17.5）对 svh（small viewport height）的支持更早、更稳定，它代表“地址栏完全展开时的最小可用高度”，是个保守值，不随滚动变化。
这意味着：同一段 height: 100dvh 在 Chrome Android 109+ 上会随地址栏收起而变高，在 Safari 16.4+ 上可能直接不识别（旧版）或行为异常（如跳变）；而 100svh 在 Safari 里能稳定铺满“最差情况”下的可视区域，但在 Chrome 里可能被忽略或 fallback 到 100vh。
为什么 Safari 没有立刻跟上 dvh？
iOS Safari 的视口模型长期以“安全优先”为设计原则：它把地址栏、工具栏、Home 指示条都算进布局视口，导致 vh 基准本身就不稳定。Safari 团队先落地 svh（对应最小视口）和 lvh（对应最大视口），是为了给开发者提供可预测的锚点；dvh 要求浏览器精确监听 UI 栏显隐并实时通知渲染引擎，这对 WebKit 的事件调度和样式重计算链路是新增负担。直到 Safari 17.5（2026 年中）才将 dvh 列为稳定支持项，此前仅部分 beta 版本开启。
-
@supports (height: 100dvh)在 Safari 16.4–17.4 中多数返回 false，即使写了也无效 -
env(safe-area-height)在 Safari 中始终可用，但只反映竖屏状态下的安全区，横屏或键盘弹出时不更新 - 某些 iOS 17.3 系统级 WebView（如微信 X5 内核）仍禁用
dvh，哪怕系统 Safari 已支持
实际写 CSS 时怎么避开这个坑？
不能靠猜哪个单位“应该生效”，得按浏览器能力分层声明，且顺序不能错：
立即学习“前端免费学习笔记（深入）”；
- 第一层（所有浏览器兜底）：
min-height: 100vh—— 防止老 Safari 直接塌成auto - 第二层（现代 Safari / Chrome 支持的动态单位）：
@supports (min-height: 100dvh) { .full { min-height: 100dvh; } } - 第三层（Safari 专属保守方案）：
@supports (min-height: 100svh) and (not (min-height: 100dvh)) { .full { min-height: 100svh; } }
注意：svh 和 dvh 不能写在同一行用逗号分隔，CSS 不支持单位列表回退；svh 的数值通常比 dvh 小 60–120px，所以用 min-height 而非 height，避免内容超长时被裁剪。
JS 动态方案在 Safari 里更容易翻车
很多教程教你在 resize 里更新 --vh 变量，但这在 Safari 中有隐藏陷阱：iOS Safari 的 resize 事件对地址栏收起响应滞后，有时要等用户停止滚动 300ms 才触发；而且 window.innerHeight 在键盘弹出瞬间会先骤降再回升，导致变量值抖动。更稳妥的是监听 visualViewport 的 resize 事件：
if ('visualViewport' in window) {
const updateVh = () => {
document.documentElement.style.setProperty('--vh', `${visualViewport.height * 0.01}px`);
};
visualViewport.addEventListener('resize', updateVh);
updateVh(); // 立即初始化
}但这个 API 在 iOS Safari 15 及更早版本不可用，所以 JS 方案永远只是兜底，不是主线解法。
真正麻烦的不是单位本身，而是 Safari 把“地址栏是否可见”当作一个需要用户交互才能确认的状态，而 Chrome 把它当作一个可被 JS 实时读取的系统信号——这种底层模型差异，决定了你写的每一行视口相关 CSS，都得先问一句：此刻，Safari 认为屏幕有多高？
