应使用@supports (min-height: 100dvh)包裹整条min-height: 100dvh规则，因ios 15及更早版本不支持dvh会忽略该声明导致页面塌陷；100vh在safari中按初始layout viewport（含收起地址栏）计算且不更新，引发滚动条、裁切等问题。
直接用 100vh 在 iOS Safari 上产生滚动条，不是你写错了，是它把地址栏高度算进去了——刚加载时视口高约 762px，100vh 却按设备物理屏高（比如 iPhone 14 的 844px）算，结果多出约 80px。滚动后地址栏收起，可视区域变大，但 100vh 值不更新，内容就被顶出、裁切，或触发意外滚动条。
为什么 100vh 在 iOS Safari 中会多出滚动条
它量的不是“此刻能看到多少”，而是“理论上最大能有多少”。Safari 按 layout viewport（含收起的地址栏）计算 100vh，但用户刚打开页面时地址栏是挂着的，真实可视高度更小。这个值从 DOMContentLoaded 就锁死，后续滚动、键盘弹出、横竖屏切换全不响应。
- 典型现象：底部按钮被工具栏遮住、
overflow: hidden失效、position: fixed元素错位 -
height: 100vh比min-height: 100vh更危险——前者会硬截断内容，用户根本滑不到底部 - Android Chrome 行为相反：它按最小视口（含地址栏）算，所以同样写
100vh，两边一个偏大、一个偏小
为什么 @supports (min-height: 100dvh) 必须包裹整条规则
iOS 15.x 及更早版本根本不认识 100dvh，会直接忽略该声明。如果只写：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.page { min-height: 100vh; min-height: 100dvh; }
老 Safari 会跳过第二行，继续走 100vh，问题照旧；新 Safari 也可能因构建工具或解析顺序干扰，没触发 100dvh 分支。
- 正确写法是让
@supports包裹整个选择器块，且兜底声明必须在外层 -
min-height: 100vh是保底，确保老环境至少有基础高度 - 别用 PostCSS 插件自动转换单位——它们常把
100dvh错误降级成100vh
为什么 100dvh 在绝对定位元素里没反应
100dvh 是百分比单位，依赖包含块（containing block）的高度。对 position: absolute 元素，如果父容器（比如 body 或某个 wrapper）没设 min-height 或显式高度，它的 100dvh 实际计算为 0。
- 常见于弹窗、遮罩层、底部固定按钮等场景
- 更稳妥的做法是用
top: 0; bottom: 0;替代height: 100dvh，只要父容器是position: relative或fixed - 若父容器本身靠
--vh变量驱动，JS 初始化必须先于子元素渲染，否则读到的是初始1px
为什么 JS 动态设 --vh 仍是必要兜底
当需兼容 iOS 15 及以下、微信 WebView（基于旧版 WKWebView）或某些 iPad Chrome 版本时，100dvh 会完全失效，页面视觉上“塌陷”成一条线。
- 必须在
DOMContentLoaded后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值 - 后续需监听
resize（横竖屏）、scroll（iOS 地址栏收放仅触发 scroll）、以及微信特有的weixinjsbridgeReady - 所有依赖视口高度的逻辑（包括
env(safe-area-inset-bottom)、window.innerHeight读取、100dvh生效前提）都要求html和body没有transform、filter、opacity
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
