移动端布局避坑：从 `100vh` 到 `100dvh`

曾几何时，我们用 height: 100vh 信心满满地实现移动端全屏布局。
但上线后你可能发现——页面一加载就跳，弹出键盘直接遮住输入框，滚动时布局还会“鬼畜”一抖？

这些问题的元凶，正是你信任的 100vh。今天我们就来聊聊它的“背刺”，以及现代 CSS 的救星：svh / lvh / dvh 三兄弟。

---

🤕 vh 的坑：全屏布局不等于全屏体验

vh 是视口高度单位，100vh 表示「当前视口的 100% 高度」。听起来完美？可惜在移动端世界，“当前”并不稳定。

你可能遇到的坑：

• 📱 页面初始加载时：地址栏展开 → 页面高度较小
• ⬆️ 滚动页面：地址栏收起 → 页面变高，内容跳动
• ⌨️ 键盘弹出：视口缩小 → 页面溢出，输入框被遮挡

.fullscreen {
  height: 100vh; /* 看似全屏，实则陷阱 */
}

---

✅ 新单位上线：svh / lvh / dvh 谁该上场？

为了解决这些布局混乱，CSS 推出了 3 个全新的视口高度单位，它们能更准确地描述真实视图空间：

单位	含义	用途建议
svh	Small Viewport Height	初始加载时的最小视口高度
lvh	Large Viewport Height	地址栏收起后的最大视口高度
dvh	Dynamic Viewport Height（推荐）	当前状态下的实时视口高度

🧠 记忆小技巧：

• s = small（保守）
• l = large（最大）
• d = dynamic（最灵活）

---

💡 用法场景举例

📱 页面加载避免抖动：用 svh

.safe-screen {
  height: 100svh; /* 地址栏展开时不会跳动 */
}

⌨️ 弹出键盘不遮住内容：用 dvh

.input-wrapper {
  height: 100dvh;
  overflow-y: auto;
}

🖼️ 想“贪心”铺满整个屏幕？用 lvh

.full-max {
  height: 100lvh; /* 地址栏收起时占满所有空间 */
}

---

🛠️ 回退写法：兼容旧浏览器

不是所有浏览器都支持新单位，所以建议写成：

height: 100vh;    /* fallback for old browsers */
height: 100dvh;   /* modern preferred behavior */

你也可以借助 @supports 做兼容性判断：

@supports (height: 100dvh) {
  .layout {
    height: 100dvh;
  }
}

---

🌍 浏览器支持情况（2025 年中）

浏览器	svh / lvh / dvh 支持
✅ Chrome 106+	支持
✅ Safari 15.4+	支持（iOS/macOS）
✅ Firefox 109+	支持
✅ Edge	支持
⚠️ 微信小程序	尚未完全支持（需实测）

---

🔚 总结：再也不用怕“vh 背刺”

场景	推荐单位	原因
初始全屏布局	svh	防止加载跳动
响应键盘/滚动变化	dvh	跟随真实视口
最大化利用空间	lvh	地址栏收起后最大填充

---

🧪 快速测试 Demo

你可以复制以下代码粘贴到 CodePen / jsFiddle 试试效果：

<style>
  body, html {
    margin: 0;
    padding: 0;
  }
  .wrapper {
    height: 100dvh;
    background: linear-gradient(to bottom, #4facfe, #00f2fe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
  }
</style>
<div class="wrapper">
  这是 100dvh 布局，试试滚动或调出键盘吧！
</div>

---

写在最后：
从 vh 到 dvh，不只是单位变化，而是开发者对真实用户体验的精细掌控。
别再让你的布局在移动端出洋相，是时候更新你的 CSS 知识库了！