为什么CSS中vh单位在安卓Chrome会导致底部遮挡_使用dvh动态视口单位-css教程-PHP中文网

应优先使用100dvh替代100vh，因其能随键盘弹出、地址栏显隐动态调整高度；但需用@supports检测并为不支持的旧版安卓Chrome提供降级方案。

为什么css中vh单位在安卓chrome会导致底部遮挡_使用dvh动态视口单位

100vh 在安卓 Chrome 里“不准”，不是你写错了，是它根本没考虑键盘弹出后的可视区域变化——必须换用 100dvh 或降级方案。

安卓 Chrome（尤其是 100+ 版本）把 100vh 算作「整个屏幕高度」，而非用户当前能看见的高度。当软键盘弹出时，视口被压缩，但 100vh 值不变，导致：

这不是 bug，是规范行为：vh 是静态单位，只读取初始 window.innerHeight 一次。

100dvh 是专为这种场景设计的动态单位，Chrome 100+ 已原生支持，会随键盘/地址栏显隐自动重算高度。

直接替换不安全，因为旧版安卓 Chrome（dvh，会直接丢弃该声明：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

正确写法是叠加 fallback：

.full-screen {
  height: 100vh;
  height: 100dvh;
}

更稳妥用 @supports 包裹：

.full-screen {
  height: 100vh;
}
@supports (height: 100dvh) {
  .full-screen {
    height: 100dvh;
  }
}

这三个新单位都响应动态视口，但语义不同，混用容易出错：

100dvh = 当前「实际可见区域」高度（推荐用于全屏容器、固定底部按钮）
100svh = 工具栏「显示时」的最小可视高度（适合可滚动内容区，配合 max-height + overflow-y: auto）
100lvh = 工具栏「隐藏时」的最大可视高度（适合首屏大图、需要撑满的 landing 页）
错误示例：height: calc(100dvh - env(keyboard-inset-bottom)) —— dvh 已含键盘影响，再减 env() 会导致过度收缩

如果你的应用跑在安卓 WebView（比如 Cordova、Capacitor）或 Chrome dvh 不可用，得手动同步可视高度：

监听 resize、scroll（iOS 地址栏变化不触发 resize）、focus（键盘弹出时机）
用 visualViewport?.height 获取实时可视高度（比 window.innerHeight 更准，但 Android WebView 支持度差）
退而求其次：监听 focus 后延时 100ms 读 window.innerHeight，存为 CSS 变量：
```
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
```
CSS 中使用：height: calc(var(--vh, 1vh) * 100)，并保留 height: 100vh 作为最老浏览器兜底