如果你正在构建一个移动端的应用产品，在桌面浏览器中一切看起来都很棒，但在手机上，你精心设计的部分却被尴尬地截断了。或者滚动起来很奇怪。更糟糕的是，当浏览器 UI 隐藏或重新显示时，它会移动。

你会怎么处理这些问题？我想你肯定是使用了 height: 100vh ，就像每个 CSS 教程都说的那样。

我遇到过这种情况。我们很多人都遇到过。问题是什么？在移动浏览器上，100vh 并不能达到你的预期。

实际情况是这样的：

在桌面上，100vh 指的是浏览器窗口的完整高度，很简单。

但在移动设备上，浏览器的边（地址栏、工具栏）是动态的。当用户打开页面时，工具栏是可见的。当用户滚动时，浏览器会隐藏它们以提供更多的屏幕空间。这会改变可见高度。

但 100vh 并不在乎这些。它只会采用尽可能大的视口高度——通常比当前可见的高度还要高。这就是为什么部分内容会显得过高，内容会溢出到折叠线以下，感觉一切都不对劲。

这就是为什么人们经常使用像 window.innerHeight 这样的 JavaScript hack 来手动修复布局，但这很麻烦、容易出错，而且扩展性也不好。

那有没有更好的解决方案呢？

CSS 为我们提供了合适的工具：svh、lvh 和 dvh

这些视口单位是 CSS 值和单位模块 4 级的一部分，它们最终让我们能够正确地处理移动设备的高度变化。

让我们来详细了解一下它们。

01.svh – 小视口高度

这表示视口可以达到的最小高度，也就是浏览器工具栏可见的时候。

当需要确保没有任何内容被隐藏在移动 UI 后面时，它非常有用——例如，即使在用户滚动之前，表单或按钮也需要保持在屏幕上。

height: 100svh;

当内容需要适应初始可见空间时，请使用此选项，无需担心意外。

02.lvh – 大视口高度

此选项反映了最大视口高度——基本上是在浏览器 UI 完全隐藏的情况下。

它适用于在用户滚动后接管的全屏部分，或者当您想要“真正的”全高体验时。

height: 100lvh;

想象一下启动画面、入门步骤或沉浸式部分。

03.dvh – 动态视口高度

这是三者中最实用的，它会根据浏览器的状态自动在 svh 和 lvh 之间调整。

如果工具栏可见，则更接近 svh。如果工具栏隐藏，则会扩展为 lvh。简而言之，它反映了屏幕的当前高度——这正是我们大多数人期望 100vh 能做到的，但实际上却从未做到。

height: 100dvh;

现在，这是我大多数布局的首选。无论浏览器界面是打开、关闭还是在两者之间切换，它都能正常工作。

在移动设备上打开此示例，浏览所有高度的页面，并在导航后上下滚动页面。

https://v0-create-navigation-app.vercel.app/

真实案例

不久前，我为一位客户构建了一个产品落地页。主页面的背景图片高度为 100vh。在桌面端，效果完美。但在移动设备上呢？图片溢出了，很尴尬，CTA 按钮在 Safari 工具栏下半隐藏，滚动会导致布局偏移。

将高度改为 100dvh 后，所有问题都解决了。无需 JavaScript，也无需任何奇怪的变通方法，只需调整大小即可。

从那时起，我开始将 dvh 作为移动设备上所有全高布局的默认高度。

为什么要切换

这样就无需与浏览器对抗了，这样可以减少工具栏显示或隐藏时布局偏移，您无需使用 JavaScript 即可修复 CSS。

您的 UI 在真实设备上的可预测性将更加显著——这才是最重要的。

最后一点：浏览器支持

大多数现代浏览器现在都支持这些单位，包括 Chrome、Safari 和 Firefox。如果您支持旧设备或小众浏览器，请访问 caniuse.com 获取最新版本。但从 2025 年起，在大多数应用中，我们都可以安全使用它们。

请参阅 MDN 上的此文档，了解浏览器支持情况：https://developer.mozilla.org/en-US/docs/Web/CSS/length

这些 CSS 单位解决了我们多年来一直困扰的问题。如果您注重移动体验，请停止依赖 100vh。

使用合适的单位：

• 当布局必须始终可见时，请使用 svh。

• 用于沉浸式全屏视图的 lvh。

• 用于自然流畅、自适应的响应式布局的 dvh。

在您的下一个项目中尝试一下，您会立即感受到它的不同——您的用户也会如此。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。