如何用CSS动态视口单位适配手机浏览器

作者：袖梨 2026-08-17

100dvh能动态适配视觉视口高度，解决软键盘弹出、分屏等场景下100vh内容遮挡或留白问题，但需@supports检测并兼容旧版iOS Safari的JS fallback方案。

直接用 100dvh 就能解决大部分手机浏览器的全屏高度适配问题，但必须确认目标环境支持——Chrome 100+、Firefox 103+、Safari 16.4+ 才原生支持 dvh；iOS Safari 16.4 之前仍得靠 JS 补救。

为什么不能继续用 100vh 做全屏高度

iOS Safari 和部分 Android 浏览器在软键盘弹出时，100vh 仍按「布局视口」计算，而实际可视区域被压缩，导致内容被遮挡或底部留白。这不是 bug，是规范行为：vh 绑定的是 layout viewport，不是用户真正看到的 visual viewport。

常见错误现象：height: 100vh 的登录页，键盘一弹，按钮就消失不见；固定定位的 footer 错位到屏幕中间
Android 分屏/折叠屏下更糟：某些三星折叠屏展开后，100vh 仍按折叠态高度计算，造成大面积留白
不要给 <html> 或 <body> 直接设 height: 100vh，iOS 容易触发滚动异常

100dvh 是什么，怎么安全使用

dvh（dynamic viewport height）是 CSS Viewport Units Level 1 标准，表示「当前视觉视口高度的 1%」，能响应键盘弹出、地址栏收起、分屏等动态变化。

必须用 @supports 包裹，否则旧浏览器会忽略整条规则：
```
@supports (height: 100dvh) {.full-screen {height: 100dvh;}}
```
降级 fallback 推荐写成：height: 100vh + min-height: 100dvh，避免旧版完全失效
优先作用于 wrapper 元素（如 <main>），而不是全局根元素

旧版 iOS Safari（<16.4）怎么补救

必须用 JS 动态监听并更新自定义 CSS 变量，且要防抖——Safari 的 resize 在键盘收起时可能连续触发 3–5 次。

核心代码：

const updateVh = () => {document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);};let resizeTimer;window.addEventListener('resize', () => {clearTimeout(resizeTimer);resizeTimer = setTimeout(updateVh, 50);});updateVh();

CSS 中配合使用：height: calc(var(--vh, 1vh) * 100)
别忘了同时设 min-height: 100% 和父级 height: 100%，否则 calc() 在某些安卓 WebView 里不生效