100vh在移动端safari中溢出屏幕，是因为它按设备物理屏高（如iphone 14的844px）计算，而初始加载时地址栏占用空间，真实可视高度仅约700px，导致底部留白、滚动条异常及fixed元素错位；应使用@supports包裹整条min-height:100dvh规则并兜底min-height:100vh，禁用height:100dvh以防内容截断。
移动端 Safari 中 100vh 溢出屏幕，不是你 CSS 写错了，是它按设备物理屏高（比如 iPhone 14 的 844px）算 1vh，但初始加载时地址栏还挂着，真实可视高度只有约 700px——结果 100vh 实际是 844px，比你能看见的区域高了一截，底部留白、滚动条意外出现、position: fixed 元素错位，全是因为这个差值。
@supports (min-height: 100dvh) 必须包裹整条规则
直接写 min-height: 100dvh 是危险操作：iOS 15.x 及更早版本、部分 WebView 完全不认识 100dvh，会整行忽略，元素高度回退为 auto，页面视觉上“塌陷”成一条线。
- 错误写法：
.page { min-height: 100vh; min-height: 100dvh; }—— 老 Safari 直接跳过第二行，新 Safari 也可能因解析顺序或构建工具干扰继续走100vh - 正确写法：兜底声明必须在外层，
@supports必须包裹整个选择器块 -
@supports检测的是“浏览器是否支持该 CSS 声明”，不是“是否支持该值”，只包值没用
.page {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.page {
min-height: 100dvh;
}
}
为什么不能用 height: 100dvh
height: 100dvh 会强制裁剪内容，用户滑不到底部——只要内容本身超过一屏，就会被硬截断。而 min-height 允许内容自然撑开，既保证首屏占满，又不牺牲可滚动性。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
min-height是安全前提：内容超长时不会被切掉，overflow: auto仍有效 - 对
position: absolute元素，min-height: 100dvh依赖父容器有明确高度；若父容器只是position: relative且无高度，它实际计算为 0 - 更稳妥的替代方案：
top: 0; bottom: 0;，不依赖包含块高度，也不怕父容器塌陷
JS 动态设 --vh 是 iOS 15 及以下唯一可靠兜底
当用户存量含大量 iOS 15.x 或微信内置 WebView（基于旧 WKWebView）时，100dvh 完全不识别，CSS 层面已无解，必须靠 JS。
- 必须在
DOMContentLoaded后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值 - 需监听
resize、scroll（地址栏收放仅触发scroll）、orientationchange，防抖处理 - 注意
html和body不能有transform、filter、opacity等创建新层叠上下文的属性，否则影响window.innerHeight取值
最易被忽略的一点：所有依赖视口高度的逻辑（包括 100dvh 生效前提、env(safe-area-inset-bottom) 计算、JS 读取 window.innerHeight），都要求 html 和 body 没有破坏包含块上下文的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
