应使用 @supports (min-height: 100dvh) 包裹整条 min-height: 100dvh 规则，因 iOS 15 及更早版本不支持 100dvh 且会忽略该声明，导致页面“塌陷”；100vh 在 iOS Safari 中因将地址栏高度计入视口计算而失准，引发滚动条异常、内容裁切、fixed 元素错位等问题。
直接用 min-height: 100dvh 替代 100vh，但必须用 @supports (min-height: 100dvh) 包裹整条规则，否则 iOS 15 及更早版本会完全忽略它，页面视觉上“塌陷”成一条线。
为什么 100vh 在 iOS Safari 里总是多出滚动条或裁切内容
iOS Safari 把地址栏高度算进 1vh 的基准——刚加载时视口高约 762px，但它按设备物理屏高（比如 812px）算出 1vh = 8.12px，于是 100vh = 812px。比你能看见的区域多出约 50px。滚动后地址栏收起，视口变大，但 100vh 值不更新，内容就被硬截断或留白。
- 典型现象包括：
overflow: hidden失效、position: fixed元素错位、全屏轮播图顶部被遮挡 -
height: 100%同样无效，除非html和body都显式设了height: 100%，且仍受 layout viewport 缺陷影响 - 别信
-webkit-fill-available：它只对height有效，min-height不认；也不响应软键盘弹起；在 iPad Chrome 中甚至会叠加导致高度翻倍
正确写法必须用 @supports 包裹整条规则块
错误写法是只包值，比如：
.page {
min-height: 100vh;
min-height: 100dvh; /* Safari 15.x 直接忽略这行，仍走上面的 100vh */
}
正确写法是让 @supports 包裹整个选择器和声明块，且外层保留兜底：
.page {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.page {
min-height: 100dvh;
}
}
- 必须用
min-height而非height：避免内容超长时被硬截断，用户滑不到底部 -
@supports检测的是“浏览器是否支持该 CSS 声明”，不是“是否支持该值”，所以不能只包值 - 绝对定位元素若写了
min-height: 100dvh却没反应，大概率是父容器（如body）没设高度——dvh依赖包含块，不是“强制占满窗口”
微信 WebView 和 iOS 15.x 必须用 JS 动态设 --vh
微信 iOS ≥ 8.0.49 才开始支持 100dvh，安卓版 X5 内核普遍不支持；iOS 15.x 及更早系统也完全不认识 dvh。此时 CSS 方案彻底失效，唯一可靠路径是 JS 动态注入变量：
- 必须在
DOMContentLoaded后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值 - 监听
resize（横竖屏）、scroll（iOS 地址栏收起时仅触发 scroll）、以及微信特有的weixinjsbridgeReady - 防抖必须用
requestAnimationFrame，微信安卓下resize触发极快且无规律，节流不当会导致高度卡死 - CSS 中使用：
min-height: calc(var(--vh, 1vh) * 100)，--vh初始值设为1vh防止未初始化时空白
所有依赖视口高度的逻辑都要求 html 和 body 不能有层叠上下文属性
env(safe-area-inset-bottom) 计算、JS 读取 window.innerHeight、100dvh 的生效前提，全都要求 html 和 body 没有 transform、filter、opacity 等会创建新层叠上下文的属性——否则部分机型下这些值会读空或计算失真，且问题极难复现和定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
