移动端布局噩梦终结！svh/dvh/lvh 3个CSS新单位彻底告别100vh跳坑史

导语：移动端布局总被100vh坑哭？这三个CSS新属性svh、dvh、lvh才是终极救命药，一文看懂如何告别跳跃和截断的惨剧。

你是否也曾在深夜奋战，只为让那个华丽的首屏大图在手机上完美展示？然而，当你在真机上测试时，却发现布局疯狂跳动、关键按钮被截断、页面像抽风一样闪烁。问题到底出在哪里？很长一段时间里，我也深陷自我怀疑。但真相是：在移动端浏览器中，100vh 就是一个彻头彻尾的谎言。一旦你理解了背后的残酷真相，修复它就简单得令人发指。接下来，我就把这个骗局彻底撕开给你看。

为什么100vh在手机上就是一场灾难？

手机浏览器的屏幕尺寸根本不是固定的。因为浏览器自带了一堆恼人的UI栏——地址栏、底部导航栏，它们会随着用户的滚动而忽隐忽现。这就造成了浏览器拥有两个“高度”：

• 可见高度：用户肉眼当前实际能看到的区域。
• 完整高度：包含那些被工具栏遮挡背后的全部空间。

而最致命的是，100vh 往往死脑筋地选择了那个“完整高度”。结果就是，你的元素变得比用户实际能看到的空间还要高。这就是为什么你的首屏会被截断，布局会在滑动时突然跳跃。

三种经典的100vh翻车现场

惨案1：首屏内容被“腰斩”

你精心设计了一个落地页，巨大的标题、副标题和一个诱人的“立即开始”按钮，用100vh实现了完美垂直居中。然而在iOS Safari里，当地址栏收缩时，你的按钮就会掉进屏幕底部的盲区。经常能看到这些车祸现场：核心按钮半遮半掩、页脚莫名上移、底部出现诡异留白。

惨案2：一打字就群魔乱舞的登录页

你用 height: 100vh 做了一个自以为高级的登录页，但当用户点击输入框、键盘弹出时，视口高度瞬间变化，整个布局开始疯狂抽搐。用户内心：“这网站怕不是个半成品。”你的内心：“为什么啊！”

惨案3：“全屏”模态框并不全屏

你弹出了一个看似完美的全屏模态框，但在iOS Safari上，它偏偏比实际屏幕大那么一点。于是模态框里出现了恶心至极的多余滚动条，关闭按钮远在天边。

现代CSS的救赎：svh、dvh、lvh

好在CSS终于亲自下场解决了这个世纪难题。我们迎来了三个全新的视口单位：

• svh (Small Viewport Height，最小视口高度)：无论浏览器的UI栏如何变化，它只取绝对不会被遮挡的最小高度。这是目前最安全的选择，适合首屏大图和任何绝不能被截断的布局。
• dvh (Dynamic Viewport Height，动态视口高度)：会随浏览器UI的变动实时更新高度，仿佛拥有变形金刚的适应力。适合像原生App一样的全屏界面。
• lvh (Large Viewport Height，最大视口高度)：取理论最大极限高度，不管有多少工具栏都想要全尺寸。但绝大多数场景请离它远点，它很可能包含用户根本看不见的盲区。

实战中如何保命？我的四招铁律

一、首屏只用svh，稳如磐石

首屏绝不能乱跳，内容绝不能被切。强烈建议使用：
min-height: 100svh;
注意，这里用 min-height 而非 height，如果内容溢出，它会自动撑开，而不是被截断。

二、仿App界面果断上dvh

如果你在做全屏应用、沉浸式页面，dvh 绝对是真爱。写法：
height: 100dvh;
哪怕浏览器的UI栏上蹿下跳，界面也能完美填满整个屏幕。

三、远离lvh，除非有特殊理由

大多数时候，lvh带来的灾难比解决的问题还多。它经常会包含那些用户看不见的盲区空间，让布局溢出。

四、永远不会翻车的终极兼容写法

如果想让所有新旧设备都稳如泰山，用这个：

.hero {
  min-height: 100vh; /* 老古董浏览器回退 */
  min-height: 100svh; /* 现代浏览器覆盖，使用安全高度 */
}

老浏览器不认识新单位，乖乖用vh；现代浏览器认出svh，直接覆盖。一行JS都不用写！

抄作业：直接可上生产环境的代码

全屏落地页首屏

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

结果：iOS和Android上都稳如老狗，绝不跳跃，关键按钮永远可见。

全屏模态框

.modal {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow-y: auto;
}

这样模态框用起来就像真正的原生App界面。

常见疑问快答

Q：我该彻底抛弃vh吗？
A：当然不是。vh在桌面端依然好用，所有破事几乎只发生在移动端浏览器。

Q：到底该选哪个单位？
A：记住保命铁律：首屏/落地页用svh；App式布局用dvh；极少数奇葩场景才用lvh。

Q：为什么不干脆全用dvh？
A：因为当浏览器调整尺寸时，动态拉伸会造成明显的跳跃和闪烁。首屏要的是死一样的稳定，所以svh才是最安全的避风港。

结语：别再怀疑你的Flexbox了

如果你的UI在手机上像一锅粥，别去检查Flexbox，别调Grid，也别去抠那几像素的Padding。99%的情况下，罪魁祸首只有一个：在手机上，100vh根本不是真正的“全屏高度”。拥抱现代CSS单位：100svh、100dvh，你的页面会瞬间专业得让人头皮发麻。