移动端布局新利器：揭秘CSS动态视口单位

随着移动互联网的高速发展，网页在各种尺寸和环境下的适配变得越来越重要。作为布局高度控制的常用单位，100vh（视口高度的100%）曾经被开发者广泛采用，轻松实现全屏高度布局。

但是，随着手机浏览器中地址栏、状态栏的动态显示隐藏，100vh的缺陷逐渐暴露出来，带来了诸多视觉和交互上的问题。为了解决这些困扰，CSS 正在悄然迎来一场单位革命——一组全新的视口单位诞生，帮助我们打造更智能、更稳定的布局。

本文将详细讲解这些 CSS 新单位的原理、用法和实战技巧，助你告别“100vh魔咒”，开启布局新篇章。

---

1. 传统100vh为什么不够用？

1.1 什么是vh？

vh是 CSS 的视口单位之一，代表视口高度的1%。例如：

height: 100vh;

表示元素的高度是视口高度的100%，也就是“铺满整个屏幕”。
这种写法简单直接，曾是实现全屏页面和弹性布局的利器。

1.2 移动端视口的特殊性

移动端浏览器为了节省屏幕空间，设计了动态显示和隐藏的地址栏与工具栏：
用户在页面顶部时，地址栏显示，视口高度较小。
用户下滑页面时，地址栏隐藏，视口高度变大。
这时，100vh依然固定为“最初的视口高度”，导致页面高度突然变化，出现内容跳动或被遮挡的情况。

1.3 实例演示困扰

假设我们给一个div设定height: 100vh，在手机浏览器里：
地址栏显示时，高度可能只有640px。
地址栏隐藏后，高度变成720px。
这时页面会出现“跳动”效果，给用户带来很差的视觉体验。

2. CSS 新单位的诞生：svh, lvh, dvh

为了解决上述痛点，CSS 工作组引入了三种新的视口高度单位，兼容动态变化的视口：

单位	名称	含义	适用场景
svh	Small Viewport Height	浏览器最小视口高度，通常包含地址栏展开时的高度	需要保证内容不被浏览器UI遮挡时使用
lvh	Large Viewport Height	浏览器最大视口高度，地址栏完全隐藏时的高度	想要铺满整个屏幕最大可用区域时使用
dvh	Dynamic Viewport Height	当前视口高度，随着浏览器地址栏显示隐藏动态变化	需要页面高度实时响应浏览器状态变化时使用

这三个单位允许开发者更灵活地针对不同状态下的视口高度进行布局调整，避免跳动和遮挡。

---

3. 详细剖析三个单位的区别与应用

3.1 svh —— 小视口高度

代表最小可用视口高度
包含地址栏、工具栏展开占用的空间
适合需要确保所有内容都能完整展示，不被UI覆盖的场景

height: 100svh;

表示容器高度固定为带有地址栏的视口高度，适合顶部有导航或固定工具栏的设计。

3.2 lvh —— 大视口高度

• 代表最大可用视口高度
• 地址栏和工具栏均隐藏时的高度
• 适合全屏展示，且不介意地址栏隐藏时占满全屏

height: 100lvh;

这个单位适合全屏体验，比如游戏、视频播放等沉浸式页面。

3.3 dvh —— 动态视口高度

• 实时反映当前视口高度
• 视口会随着地址栏展开或隐藏而动态变化
• 适合内容随滚动实时变化高度的场景，保证内容随视口调整

height: 100dvh;

通常用于普通网页主容器，保证页面在滚动时不会跳动。

---

4. 实战案例：用新单位优化全屏页面

4.1 传统写法

.fullscreen {
  height: 100vh;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

问题：在手机浏览器中，地址栏隐藏/显示时，元素高度跳变。

4.2 新写法

.fullscreen {
  height: 100dvh;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

效果：容器高度会根据当前视口动态变化，滚动时不会突然跳动，更加平滑。

4.3 回退方案（兼容老浏览器）

.fullscreen {
  height: 100vh;   /* 先设置传统单位，保证兼容 */
  height: 100dvh;  /* 支持的新单位，浏览器优先采用 */
}

浏览器会优先解析后面声明，兼容性差的浏览器则降级使用vh。

---

5. 其他相关单位与配合使用

5.1 视口宽度单位：vi 和 vb

对应动态视口宽度，适用于宽度自适应需求，避免和vw产生同样的动态变化问题。

5.2 安全区域变量：env(safe-area-inset-*)

主要用来兼容刘海屏、圆角屏，配合视口单位实现无遮挡的安全区域布局。

padding-top: env(safe-area-inset-top);

保证内容不会被设备边缘挤压或遮挡。

---

6. 浏览器支持现状与未来趋势

6.1 当前支持

• 主要现代浏览器最新版本已开始支持 svh, lvh, dvh
• iOS Safari 16.4+，Chrome 108+等

6.2 兼容建议

• 继续保留vh作为回退
• 在关键项目中测试动态视口单位行为
• 关注浏览器厂商最新兼容动态

---

7. 总结

• 传统100vh单位在移动端因地址栏动态隐藏显示而产生跳动问题
• CSS 新增的 svh, lvh, dvh 等视口单位，精准描述不同视口状态下的高度
• 使用动态视口单位可以实现更平滑、无跳动的高度布局
• 结合安全区域变量 env()，提升跨设备适配体验
• 建议开发者尽早采用这些新单位，为未来适配打下坚实基础