引言
在响应式网页设计中，vh（视口高度）和 vw（视口宽度）单位因其直观的比例概念而被广泛使用。然而，跨浏览器、跨设备的 vh vw 兼容性 问题常常让前端开发者头疼。本文将从 CSS 规范、主流浏览器实现差异、移动端特殊表现以及实战解决方案四个维度，系统性地剖析 vh、vw 的兼容性细节，帮助你在项目中稳妥使用这些相对单位。
1. vh 与 vw 的技术原理
1.1 定义与计算方式
1vh= 视口高度（viewport height）的 1%。1vw= 视口宽度（viewport width）的 1%。
视口是指浏览器窗口的可视区域，不包括滚动条、地址栏等 UI 元素。浏览器在渲染时会先计算视口尺寸，再把 vh、vw 转换为实际像素值，供布局使用。
1.2 与百分比（%）的区别
%参照的是父元素的尺寸，而vh/vw参照的是整个视口。- 在弹性容器（flex）或网格布局（grid）中，
vh/vw能够脱离父级限制，实现全屏或全宽的视觉效果。
2. 主流浏览器的实现差异
2.1 桌面端
| 浏览器 | 版本 | 对 vh/vw 的支持 | 已知兼容性问题 |
|---|---|---|---|
| Chrome | 60+ | 完全支持 | 在缩放时计算可能出现轻微误差 |
| Firefox | 55+ | 完全支持 | 在极端 DPI 设置下偶尔出现 1px 偏差 |
| Safari | 10+ | 完全支持 | 在全屏模式下 vh 仍会计入地址栏高度 |
| Edge | Chromium内核 | 完全支持 | 与 Chrome 表现一致 |
2.2 移动端
移动端的兼容性更为复杂，主要受以下因素影响：
- 地址栏收缩/展开：在 Chrome、Safari 移动端，地址栏的出现与否会改变视口高度，导致
vh动态变化。 - 软键盘弹出：软键盘占用屏幕空间时，部分浏览器仍保持原始
vh，导致布局被遮挡。 - 视口元标签（viewport meta）：
<meta name="viewport" content="height=device-height, width=device-width">能在一定程度上固定视口高度，提升兼容性。
2.2.1 iOS Safari
- iOS 13 之前，
100vh实际等于 包括 地址栏的高度，导致页面出现空白。 - iOS 13+ 引入
vh的 动态视口，但仍需配合env(safe-area-inset-bottom)处理底部安全区。
2.2.2 Android Chrome
- Android Chrome 在页面滚动时会自动隐藏地址栏，此时
vh会重新计算。 - 使用
100vh时，若页面加载时地址栏未隐藏，会出现内容被遮挡的情况。
3. 常见兼容性坑与解决方案
3.1 “100vh”导致的顶部/底部空白
问题：在移动端加载时，地址栏占据视口导致 100vh 实际比可视区域大。
解决方案：
- 使用 JavaScript 动态获取
window.innerHeight，并将其写入 CSS 变量：function setVh() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`);}setVh();window.addEventListener('resize', setVh); - 在 CSS 中使用
height: calc(var(--vh) * 100);替代100vh。
3.2 软键盘遮挡输入框
问题：软键盘弹出时，vh 不会缩小，导致底部元素被键盘覆盖。
解决方案：
- 监听
focus事件，在输入框获取焦点时临时切换为height: auto;或使用env(safe-area-inset-bottom)。 - 对于表单页面，可在键盘弹出时添加
padding-bottom，确保可滚动。
3.3 多设备安全区（Notch）适配
问题：在 iPhone X 及以后机型，底部的 “home indicator” 占用空间。
解决方案：
- 使用 CSS 环境变量
constant(safe-area-inset-bottom)（已废弃）或env(safe-area-inset-bottom)，结合vh：.footer { height: calc(10vh + env(safe-area-inset-bottom));}
3.4 老旧浏览器的回退方案
对于不支持 vh/vw 的极端环境（如 IE9），可以提供 像素回退：
.element { height: 500px; /* fallback */ height: 50vh; /* modern browsers */}通过声明顺序，现代浏览器会覆盖旧值。
4. 实战案例：全屏轮播图的兼容实现
下面以一个全屏轮播图为例，展示如何在 vh vw 兼容性 环境下保持一致的视觉效果。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>全屏轮播图</title><style> :root { --vh: 1vh; } /* 初始值，后面会被 JS 覆盖 */ .hero { width: 100vw; height: calc(var(--vh) * 100); background: url('banner.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; }</style></head><body><div class="hero">欢迎来到我们的站点</div><script>function setVh() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`);}setVh();window.addEventListener('resize', setVh);</script></body></html>要点回顾：
- 使用
100vw直接占满视口宽度，兼容性良好。 - 通过
--vh自定义属性解决移动端地址栏导致的高度误差。 resize事件确保在横屏/竖屏切换时实时更新。
5. 前瞻：CSS svh、lvh、dvh 的新标准
2023 年，CSS WG 引入了 小视口（svh）、大视口（lvh）、动态视口（dvh） 三种新单位，以更细粒度地控制地址栏、工具栏的影响。
svh：等同于 小视口高度（地址栏隐藏时的高度）。lvh：等同于 大视口高度（地址栏显示时的高度）。dvh：等同于 动态视口高度，随地址栏的显示/隐藏实时变化。
这些单位在最新的 Chrome、Safari 中已经实现，未来可以进一步降低 vh vw 兼容性 的复杂度。开发者可以逐步迁移，使用 dvh 替代 vh，在代码中保持向后兼容。
6. 小结
vh与vw在桌面端表现稳定，但移动端受地址栏、软键盘、刘海屏等因素影响显著。- 通过 JavaScript 动态设置 CSS 变量、使用
env(safe-area-inset-*)、以及合理的回退方案，可有效提升 vh vw 兼容性。 - 关注新标准
svh/lvh/dvh，为未来的跨设备布局奠定基础。
掌握以上技巧后，你将在实际项目中自如运用视口单位，实现真正的全平台响应式设计。
关于vh vw 兼容性的常见问题
Q1: 为什么在 iPhone Safari 中 100vh 会出现空白？
A: 旧版 iOS Safari 将地址栏计入视口高度，导致 100vh 超出可视区域。可使用 JavaScript 读取 window.innerHeight 并通过 CSS 变量实现真实高度，或升级到 iOS 13+ 的动态视口。
Q2: vh 在 Android Chrome 中滚动后会变化吗？
A: 会。Chrome 在滚动时会隐藏地址栏，重新计算 vh。因此在页面加载时若地址栏未隐藏，使用 100vh 可能导致内容被遮挡，建议在 resize 事件中更新高度。
Q3: 如何兼容不支持 vh 的老旧浏览器？
A: 为关键布局提供像素或百分比的回退值，例如 height: 500px; height: 50vh;，让现代浏览器覆盖旧值。
Q4: env(safe-area-inset-bottom) 与 vh 能一起使用吗？
A: 能。可以通过 calc() 将安全区与视口高度相加，确保底部元素不被刘海屏的 “home indicator” 遮挡，例如 height: calc(10vh + env(safe-area-inset-bottom));。
Q5: 新的 dvh 单位何时可以在项目中使用？
A: dvh 已在 Chrome 108、Safari 15.4 及以上版本实现。若项目需要兼容旧浏览器，仍建议保留 vh 并通过 JS 动态变量做降级处理。
主题测试文章，只做测试使用。发布者：币安赵长鹏，转转请注明出处：https://www.binancememe.com/121544.html
