移动互联网时代，前端开发者常常面临一个棘手的问题：精心设计的网页在桌面端展示完美无缺，然而在移动端却状况百出。页面内容莫名截断、异常滚动现象频发，更糟糕的是，当浏览器的工具栏隐藏或显示时，整个布局会发生令人尴尬的位移。这些问题的罪魁祸首，往往是我们在 CSS 中常用的height: 100vh属性。
一、100vh的移动端困境
在桌面浏览器环境下，100vh（Viewport Height）的定义非常直观，它代表浏览器视窗的完整高度。但在移动端，情况却大不相同。移动浏览器的顶部地址栏和底部工具栏是动态变化的 —— 当用户首次打开页面时，这些 UI 元素会显示；而当用户开始滚动页面时，它们可能会自动隐藏，从而导致视窗高度发生变化。
问题的关键在于，100vh并不会感知这种动态变化。它始终以浏览器可能达到的最大高度为基准进行计算，这就导致页面内容经常出现截断或溢出的情况，严重影响用户体验。为了解决这个问题，许多开发者不得不使用 JavaScript，通过window.innerHeight来动态调整布局。但这种方法不仅增加了开发复杂度，还容易产生维护上的难题。
二、CSS 新单位：svh、lvh 和 dvh
幸运的是，随着 CSS 技术的发展，我们有了更好的解决方案。CSS 的 Values and Units Module Level 4 引入了三个专门针对移动端布局问题的新单位：
1. svh（Small Viewport Height，小视窗高度）
svh代表视窗的最小高度，也就是浏览器工具栏完全展开时的高度。这个单位特别适合那些必须始终保持可见的页面元素，例如固定在页面内的按钮、表单组件或底部导航栏。
.element {
height: 100svh;
}2. lvh（Large Viewport Height，大视窗高度）
lvh表示视窗的最大高度，即浏览器工具栏完全隐藏时的高度。如果你希望为用户提供一种完全沉浸式的体验，比如设计全屏启动页或欢迎界面，lvh就是理想的选择。
使用示例：
css
.full-screen {
height: 100lvh;
}3. dvh（Dynamic Viewport Height，动态视窗高度）
dvh是这三个单位中最灵活、最实用的一个。它能够自动适应浏览器工具栏的显示与隐藏：当工具栏显示时，dvh接近svh；当工具栏隐藏时，dvh接近lvh。可以说，dvh真正实现了开发者期待的动态 "100vh" 效果。
使用示例：
css
.responsive-element {
height: 100dvh;
}三、实际案例：从100vh到100dvh的转变
在一个产品登陆页项目中，开发者最初使用height: 100vh来设置 hero 区域的高度。在桌面端，效果非常理想，但在移动端却出现了一系列问题：
- 背景图片超出可视区域
- 重要的 CTA 按钮被 Safari 的工具栏遮挡
- 页面滚动时布局发生明显抖动
当开发者将 CSS 属性改为height: 100dvh后，所有问题都迎刃而解，而且无需借助任何 JavaScript 代码或复杂的布局调整。这种方法已经成为移动端全屏布局的新趋势。
四、为什么要尽快采用新单位？
- 简化开发流程：不再需要与浏览器 UI 进行反复的调试和优化
- 提升用户体验：避免因工具栏变化导致的布局抖动和内容显示异常
- 减少代码复杂度：无需使用 JavaScript 来辅助布局调整
- 增强兼容性：在真实设备上提供更稳定、可预测的显示效果
五、浏览器兼容性
截至 2025 年，主流浏览器如 Chrome、Safari 和 Firefox 都已全面支持svh、lvh和dvh这三个新单位。这意味着，开发者可以放心地在项目中使用这些新特性。
六、如何选择合适的单位？
- 始终可见的内容：使用100svh，确保元素不会被工具栏遮挡
- 沉浸式全屏体验：使用100lvh，打造无干扰的视觉效果
- 动态自适应布局：使用100dvh，让页面高度随工具栏状态自动调整
结语
在移动端布局设计中，100vh的局限性已经成为过去式。通过使用svh、lvh和dvh这些新的 CSS 单位，开发者可以更轻松地创建出既美观又实用的移动页面。下次进行移动端开发时，不妨尝试这些新特性，你会发现用户体验的提升是立竿见影的。