应使用100dvh替代100vh解决ios safari和android chrome地址栏显隐导致的溢出或留白问题，但必须通过@supports (min-height: 100dvh)检测并前置min-height: 100vh兜底，因ios 15及更早、微信webview等不支持dvh，否则高度声明会被忽略。
直接换 100dvh 就能解决 iOS Safari 和 Android Chrome 中因地址栏显隐导致的溢出或留白问题，但必须加 @supports 检测并前置 min-height: 100vh 作为兜底——否则老版本 Safari 或微信 WebView 会完全忽略高度声明。
为什么 100vh 在移动端会溢出屏幕
它不是 bug，是浏览器按“最大可能视口”算出来的值：页面刚加载时地址栏还挂着，window.innerHeight 是比如 762px，但 1vh 却被解析为设备物理屏高（812px）的 1%，即 8.12px，于是 100vh = 812px。结果就是底部多出约 50px 白边，触发意外滚动条。
滚动后地址栏收起，可视区域变大，但 100vh 不重算，布局就“跳变”——内容突然上移、fixed 元素错位、轮播图被截断。
- Android Chrome 同样存在，尤其在 PWA 或全屏模式下更明显
-
height: 100%无效，除非html和body都显式设了height: 100%（它们默认是auto） - 这不是你 CSS 写错了，是单位定义本身没考虑动态 UI
用 100dvh 替代时必须加 @supports 检测
100dvh 是当前最接近“开箱即用”的解法，但它只在 Safari 16.4+、Chrome 105+、Firefox 112+、Edge 110+ 原生支持。iOS 15 及更早、微信内置 WebView、QQ 浏览器等多数不识别该单位，直接忽略整条声明，导致元素高度塌陷为 auto。
正确写法必须是：
.full-height {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.full-height {
min-height: 100dvh;
}
}
- 用
min-height而非height：防止内容超长时被强制裁剪，用户滑不到下面 - 不能写成
height: 100dvh—— 它会截断内容，不是“撑满一屏”的语义 -
@supports必须检测min-height: 100dvh，不是height；旧版 Safari 对height的dvh支持更差
svh 和 lvh 不是 dvh 的降级，而是不同场景选择
100svh 和 100lvh 是两个固定锚点值，不会跳变，但也不能响应实时变化：
-
100svh= 地址栏**完全展开**时的最小高度，适合底部按钮、支付页表单等“绝不能被遮挡”的场景 -
100lvh= 地址栏**完全收起**时的最大高度，适合启动页、广告全屏图，但滚动初期可能被地址栏盖住 - 三者语义完全不同，
@supports也需分别检测：@supports (min-height: 100svh) - 别混用：同一容器上同时写
100dvh和100svh，不同设备行为差异会导致 fixed 元素错位
JS 动态设置 --vh 仍是必要兜底方案
当你的用户大量使用微信或企业内嵌 WebView 时，纯 CSS 方案不可靠。此时 JS 是目前唯一能稳定跨平台响应地址栏变化的方式：
- 监听
resize，不是scroll：iOS 地址栏显隐只触发resize，监听scroll会失效或延迟 - 首次渲染必须手动执行一次：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - CSS 中要用
calc(var(--vh, 1vh) * 100)，避免变量未定义时整个计算式失效 - 加 300ms 节流：iOS 连续
resize高频，不节流会卡顿
复杂点在于：dvh 虽好，但无法覆盖所有 WebView 环境；而 JS 方案看似重，却是当前唯一能真正落地的跨平台解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
