应使用@supports (min-height: 100dvh)包裹整条min-height: 100dvh规则，因ios 15及更早版本不支持dvh会忽略该声明导致页面塌陷；100vh在safari中因地址栏高度计算偏差引发滚动条、内容裁切等问题，需用min-height而非height并配合兜底和js动态--vh变量确保兼容性。
直接用 100vh 在 iOS Safari 中显示异常，不是你写错了，是它把地址栏高度算进去了——刚加载时视口高 762px，1vh 却按物理屏高 812px 算，导致 100vh 实际为 812px，比可见区域多出约 50px。滚动后地址栏收起，视口变大，但 100vh 值不更新，内容就被裁切、留白或触发意外滚动条。
为什么 @supports (min-height: 100dvh) 必须包裹整条规则
iOS Safari 15.x 及更早版本根本不认识 100dvh，会直接忽略该声明；如果只写：
.page { min-height: 100vh; min-height: 100dvh; }
新旧 Safari 都走 100vh，问题照旧。正确做法是让 @supports 包裹整个选择器块，且兜底声明必须在外层：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
@supports检测的是“浏览器是否支持该 CSS 声明”，不是“是否支持该值”，所以必须包规则，不能只包值 - 外层
min-height: 100vh是保底，确保老环境至少有基础高度 - 绝对不能用
height: 100dvh—— 内容超长时会被硬截断，用户滑不到底部
position: absolute 元素设了 100dvh 为啥没反应
百分比高度（包括 100dvh）依赖包含块（containing block）的高度，不是“强制占满屏幕”。常见于弹窗、遮罩层、底部按钮等场景。
- 父容器（如
body或直接祖先）没设min-height: 100dvh或显式高度 → 子元素100dvh实际计算为 0 - 对绝对定位元素，更稳妥的是用
top: 0; bottom: 0;替代height: 100dvh - 若父容器本身靠
--vh变量驱动，需确保它已初始化完成，否则子元素读到的是初始 1px
兼容 iOS 15 及以下必须用 JS 动态设 --vh
当用户存量含大量 iOS 15.x 或微信内置 WebView 时，100dvh 会完全失效，页面视觉上“塌陷”成一条线。
- 必须在
DOMContentLoaded后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值 - 后续需监听
resize和scroll（防抖），因为地址栏收放、键盘弹出、横竖屏切换都会改变window.innerHeight - 别信
-webkit-fill-available：它只对height有效，min-height不认；也不响应软键盘弹起；在 iPad Chrome 中甚至会叠加导致高度翻倍
最易被忽略的一点：所有依赖视口高度的逻辑（比如 env(safe-area-inset-bottom) 计算、JS 读取 window.innerHeight、100dvh 的生效前提）都要求 html 和 body 没有 transform、filter、opacity 等会创建新层叠上下文的属性——否则部分 Safari 版本会静默退化行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
