如何用CSS动态视口单位适配手机浏览器-css教程-PHP中文网

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

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

直接用 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 仍按折叠态高度计算，造成大面积留白
不要给或直接设 height: 100vh，iOS 容易触发滚动异常

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

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

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须用 @supports 包裹，否则旧浏览器会忽略整条规则：

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

降级 fallback 推荐写成：height: 100vh + min-height: 100dvh，避免旧版完全失效
优先作用于 wrapper 元素（如 <main></main>），而不是全局根元素

旧版 iOS Safari（

必须用 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 里不生效