CSS中height: 100vh为何在移动端/缩放时无法占满视口？

Question

在移动端或浏览器缩放时，`height: 100vh` 常无法真正占满视口高度——尤其在 iOS Safari 中，地址栏展开/收起会动态改变 `vh` 单位的基准（基于初始视口，而非实时可视区域），导致元素“过高”或“留白”；Android Chrome 虽较稳定，但在页面滚动、软键盘弹出或强制缩放（如双指 pinch）后，`100vh` 仍可能失效。此外，桌面端缩放（如 Ctrl+/-）也会使 `vh` 基于缩放前的布局尺寸计算，造成高度偏差。根本原因在于：**`vh` 基于 CSS 视口（CSS Viewport），而该视口在移动端常与真实可视区域（Layout Viewport / Visual Viewport）脱节，且规范未强制要求其随 UI 变化实时更新**。这不是 Bug，而是浏览器为性能与兼容性做的权衡。开发者需避免依赖 `100vh` 实现精确全屏布局，转而采用 `100dvh`（动态视口单位）、`min-height: 100vh` + `flex` 容器、或 JavaScript 动态监听 `visualViewport.height` 等更鲁棒方案。

Answer 1

```html

一、现象层：全屏布局“失灵”的典型现场

• iOS Safari 中，页面首次加载时 height: 100vh 看似正常，但下拉刷新或地址栏收起后，元素突然溢出屏幕底部（“过高”）；
• Android Chrome 在软键盘弹出时，100vh 未收缩，导致表单被遮挡且无法滚动到底部；
• 桌面端按 <kbd>Ctrl +</kbd> 缩放至 125% 后，100vh 仍按 100% 缩放前的视口高度计算，造成内容区域与视口错位；
• 双指 pinch 缩放移动端页面后，vh 值冻结，不再响应 visualViewport 的实时变化。

二、机制层：CSS Viewport 与 Visual Viewport 的三重割裂

浏览器内部存在三类关键视口概念，其生命周期与更新策略截然不同：

视口类型	触发时机	是否动态响应 UI 变化	对 vh 的影响
CSS Viewport（规范定义）	页面初始解析时锁定	❌ 不响应地址栏/键盘/缩放	✅ 1vh = 1% of CSS Viewport height
Layout Viewport（布局视口）	受 <meta name="viewport"> 控制	⚠️ 仅在页面重排时更新（非实时）	❌ 不直接参与 vh 计算
Visual Viewport（可视视口）	实时反映用户当前可见区域（含缩放、键盘、地址栏）	✅ 每帧可变（通过 visualViewport.height 暴露）	❌ vh 单位不基于它

三、演进层：从兼容性妥协到标准进化——dvh 的诞生逻辑

CSS Values and Units Level 4 引入了动态视口单位（dvh, dvw, dvi, dvb），其设计哲学是：

• 明确绑定至 visualViewport 的瞬时尺寸；
• 在 iOS 16.4+ / Android Chrome 105+ / Safari 16.4+ 中已稳定支持；
• 回退策略需兼顾旧版：使用 @supports (height: 100dvh) 进行特性检测。

四、实践层：四种生产级解决方案对比与选型指南

graph LR
A[需求场景] --> B{是否需精确撑满实时可视区？}
B -->|是| C[首选 100dvh + @supports]
B -->|否/需兼容 iOS <16.4| D[Flex 容器 + min-height: 100vh]
B -->|含复杂交互如键盘/缩放监听| E[JS 监听 visualViewport.resize]
B -->|遗留系统/无 JS 环境| F[viewport-fit=cover + vh fallback]

五、工程层：可复用的跨平台全屏适配方案（含 Polyfill）

// 动态同步高度：兼顾 dvh 支持与降级
function syncFullHeight() {
  const root = document.documentElement;
  const vh = window.visualViewport?.height || window.innerHeight;
  root.style.setProperty('--dynamic-vh', `${vh}px`);
}
window.visualViewport?.addEventListener('resize', syncFullHeight);
window.addEventListener('resize', syncFullHeight); // 兜底桌面缩放
syncFullHeight();

/* CSS 中使用 */
.fullscreen {
  height: 100dvh; /* 主力 */
  height: calc(var(--dynamic-vh, 100vh)); /* 降级 */
}

六、陷阱层：被忽视的“伪成功”与隐蔽失效点

• min-height: 100vh 在 flex 容器中仍可能因父容器未设 height: 100% 而失效；
• 使用 position: fixed; top: 0; bottom: 0 替代 100vh 时，iOS Safari 的 visualViewport 滚动偏移会导致定位偏差；
• Web App 添加 apple-mobile-web-app-capable=yes 后，虽隐藏地址栏，但 100vh 仍基于初始 layout viewport，非真正全屏。

七、未来层：W3C 标准演进与开发者应对节奏

当前 W3C CSS WG 已将 dvh 列为推荐特性（REC），并推动以下方向：

• 将 visualViewport API 纳入 Web IDL 标准，提升跨引擎一致性；
• 探索 env(viewport-height) 环境变量作为更细粒度的替代方案；
• 鼓励构建工具（如 PostCSS 插件）自动注入 dvh 回退逻辑。

```