开发者在设计移动端布局时，经常遇到这样的问题：

在桌面浏览器上一切正常，但当页面打开到手机上时，精心设计的页面却总会出现奇怪的截断、异常滚动，甚至布局在浏览器工具栏隐藏或出现时发生位移。

这类问题的元凶通常都是 CSS 中的 height: 100vh。

虽然大多数 CSS 教程都会推荐使用这个单位，但实际上，在移动设备上，100vh 并不能提供理想的用户体验。

? 问题到底出在哪？

在桌面环境下，100vh 很简单，代表浏览器视窗的全部高度。

但移动端浏览器则不同，其顶部的地址栏和底部工具栏（浏览器 UI）是动态变化的。当用户首次打开页面时，工具栏显示；当用户开始滚动时，工具栏可能隐藏，视窗高度随之变化。

然而，100vh 并不考虑这个动态变化，它总是以浏览器最大可能的高度为基准，导致页面实际显示内容可能被截断、溢出，用户体验因此严重受损。

很多开发者不得不采用 JavaScript 的方式，如使用 window.innerHeight 来动态修正布局，这种做法不仅繁琐，还容易出错，难以维护。

幸运的是，CSS 现在提供了更合适的解决方案。

? CSS 提供的新单位：svh、lvh 和 dvh

CSS 的 Values and Units Module Level 4 引入了专门应对移动端布局问题的新单位，分别为：

✅ svh（Small Viewport Height，小视窗高度）

svh 代表视窗的最小高度，即浏览器工具栏完全展开并显示时的高度。

适用于：

• 必须确保始终在视窗内的内容，比如固定在页面内的按钮、表单或底部导航。

使用示例：

height: 100svh;

✅ lvh（Large Viewport Height，大视窗高度）

lvh 则表示视窗的最大高度，也就是浏览器工具栏完全隐藏时的高度。

适用于：

• 希望用户获得完全沉浸式体验的页面或交互设计，比如全屏启动页、欢迎界面等。

使用示例：

height: 100lvh;

✅ dvh（Dynamic Viewport Height，动态视窗高度）

dvh 是三者中最灵活实用的单位，会随着浏览器工具栏的隐藏与出现自动调整：

• 工具栏显示时，接近 svh；
• 工具栏隐藏时，则接近 lvh。

换句话说，dvh 才是真正意义上在移动端实现了开发者期待的动态“100vh”功能。

使用示例：

height: 100dvh;

实际效果示例：可在移动设备上打开以下示例链接，尝试不同页面间的滚动交互：

? 移动端高度单位示例 https://v0-create-navigation-app.vercel.app/

? 实际项目案例

在一个实际的产品登陆页项目中，开发者原本将 hero 部分设置为 height: 100vh。桌面效果完美，但在移动端却遇到了明显问题：

• 背景图片溢出；
• 关键的按钮被 Safari 工具栏遮挡；
• 滚动过程中布局发生明显位移。

当开发者将 CSS 改为：

height: 100dvh;

上述问题即刻消失，无需任何 JavaScript 辅助或复杂的布局调整。这种方式已经逐渐成为移动端全屏布局的主流选择。

?️ 为什么应该尽快采用新单位？

• 避免与浏览器 UI 反复博弈；
• 减少工具栏显示或隐藏时布局的抖动与位移；
• 无需再使用 JavaScript 辅助修复布局；
• 提供更稳定、可预测的用户体验，尤其在真实设备上尤为明显。

? 浏览器兼容性情况

截至 2025 年，大部分主流浏览器（Chrome、Safari、Firefox 等）都已支持上述单位。

? 什么时候用哪个单位？

• 如果页面内容必须始终可见，确保布局永远不会被工具栏遮挡，使用：

height: 100svh;

• 如果追求完全沉浸式全屏体验（如欢迎页、启动屏），使用：

height: 100lvh;

• 如果需要布局能在工具栏隐藏或显示时动态适应，自动调整高度，最推荐使用：

height: 100dvh;

? 立即实践这些新单位吧！

移动端布局再也无需忍受 100vh 带来的种种问题。

开发者在新项目中立即采用上述单位，便能感受到立竿见影的体验提升——用户也将明显感受到差异。

前端AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习。