彻底搞懂 CSS 动态视口单位：svh, lvh, dvh 全解析

在移动端网页开发中，你是否遇到过这样的问题？

• 为外层容器设置 height: 100vh 后，页面底部内容被浏览器地址栏或工具栏遮挡；
• 或者页面莫名其妙出现滚动条，明明没有内容溢出。

这些问题的根源在于：传统 vh 单位在移动端行为不一致。为解决这一痛点，CSS 引入了三个全新的动态视口单位：

• svh（Small Viewport Height）
• lvh（Large Viewport Height）
• dvh（Dynamic Viewport Height）

以及对应的宽度单位 svw、lvw、dvw。

---

一、为什么需要新单位？

在移动端浏览器中，视口（Viewport）高度是动态变化的：

• 页面刚加载时，地址栏和底部工具栏通常可见 → 可用高度较小；
• 用户向下滚动时，浏览器会自动隐藏这些 UI 元素 → 可用高度变大。

而传统 100vh 的定义是：“浏览器 UI 完全收起时的最大高度”。这就导致：

当 UI 显示时，100vh 比实际可见区域还高，内容被遮挡。

为应对这种“薛定谔的视口”，CSS 新增了三种视口单位，分别对应不同场景下的可用空间。

---

二、三大视口单位对比

单位	含义	适用场景	特性
svh	Small Viewport Height 始终代表最小可用高度（UI 全显示时）	重要内容、固定导航、操作按钮	安全可靠，内容永不被遮挡
lvh	Large Viewport Height 代表最大可用高度（UI 全隐藏时） ≈ 传统 vh	全屏背景、视频播放器、游戏界面	沉浸感强，但可能溢出
dvh	Dynamic Viewport Height 根据浏览器 UI 状态实时动态调整	大多数需要视口单位的场景	体验最佳，但需注意性能

💡 宽度单位（svw/lvw/dvw）逻辑相同，但在移动端宽度通常固定，差异不明显；在桌面端可能受滚动条影响。

---

三、实战应用场景

1. svh —— 安全区域守护者

场景：确保关键元素始终可见，避免被浏览器 UI 遮挡。

.app-header {
  height: 10svh; /* 始终预留 10% 高度 */
  position: sticky;
  top: 0;
}

2. lvh —— 沉浸式体验专家

场景：最大化内容展示，如全屏视频、阅读模式。

.video-player {
  height: 100lvh;
  width: 100lvw;
}

3. dvh —— 动态适配大师（推荐首选）

场景：需要平滑响应视口变化的区域（如 Hero 区块）。

.hero-section {
  height: 100dvh;
  transition: height 0.3s ease; /* 增强平滑过渡 */
}

技术原理：

浏览器通过硬件加速实时计算可用视口。

• 地址栏显示时：100dvh = 100svh
• 地址栏隐藏时：100dvh = 100lvh
  过渡过程由浏览器自动优化，无需手动干预。

---

四、最佳实践与避坑指南

“既然 dvh 这么好，是不是该全面替换 vh？”

不一定！需权衡体验与性能。

dvh 的潜在问题：

• 频繁触发重排（Reflow）：因值随滚动实时变化；
• 复杂布局 + 动画 可能导致掉帧或视觉抖动。

推荐策略：

场景	推荐单位	理由
首屏核心交互（如 Hero 区、CTA 按钮）	svh	保证初始加载时内容不被遮挡，布局稳定
全屏背景/装饰性区域	dvh（简单页面）或 lvh	视觉优先，轻微溢出可接受
文本或字体大小	避免使用 dvh	滚动时文字大小变化会严重影响阅读体验

五、总结

单位	核心价值	使用建议
svh	安全底线	用于关键 UI 元素，确保可见性
lvh	最大空间	用于沉浸式内容，等同传统 vh
dvh	动态适配	默认首选，但注意性能开销

这套新单位终结了移动端“视口跳动”问题，让开发者真正掌控“用户实际能看到的空间”。

---

如需兼容旧浏览器，请结合 @supports 或 JS 回退方案：

.hero {
  height: 100vh; /* fallback */
}
@supports (height: 100dvh) {
  .hero {
    height: 100dvh;
  }
}