优先使用100dvh而非100svh或100lvh；因100svh在工具栏隐藏后仍保持最小高度导致内容上浮留白，而100dvh能实时响应工具栏显隐变化，iOS 16.4+/Chrome 109+已支持，但必须用@supports降级兼容旧设备。
直接结论：优先用 100dvh，不是 100svh，也不是 100lvh；iOS 16.4+ 和 Android Chrome 109+ 已支持，但必须加 @supports 降级，否则老设备会直接失效。
为什么 100svh 不适合解决工具栏遮挡问题
100svh（small viewport height）表示“工具栏显示时的最小可见高度”，它在地址栏展开时才生效。但实际遮挡问题发生在工具栏**隐藏后**——此时用户看到的区域变大，100svh 反而比当前可视区还小，导致容器留白、内容上浮。这不是你想要的“撑满当前屏幕”的效果。
-
100svh≈ 地址栏+底部工具栏都展开时的高度（最保守值） - 滚动后工具栏收起 → 实际可视区变大 →
100svh值不变 → 容器高度固定偏小 - 典型现象：页面底部出现明显空白，或 fixed 元素悬浮在半空
为什么 100dvh 是当前最优解
100dvh（dynamic viewport height）是唯一能实时响应工具栏显隐变化的单位。它代表“此刻用户真正能看到的视口高度”，iOS 16.4+ Safari 和新版 Chrome 已原生支持，无需 JS 干预。
- 页面加载时：取含地址栏的初始高度
- 滚动中地址栏收起：
100dvh自动增大，容器同步撑开 - 滚动回顶部地址栏展开：
100dvh自动缩小，不溢出 - 兼容写法必须带
@supports，否则旧版 iOS 会忽略整条声明
/* 推荐写法，带 fallback */<br>.fullscreen {<br> height: 100vh;<br> @supports (height: 100dvh) {<br> height: 100dvh;<br> }<br>}
不加 @supports 会怎样？
如果不包裹 @supports (height: 100dvh)，iOS 15 及更早版本 Safari 会直接跳过 height: 100dvh 这行，只保留 height: 100vh —— 问题照旧：地址栏收起后内容被截断，或者底部 fixed 按钮被遮住。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 旧版 iOS 不识别
dvh单位 → 整条 CSS 声明被浏览器丢弃（不是报错，是静默忽略） - 不能依赖“后面声明覆盖前面”逻辑，因为
100dvh行根本没生效 - 微信内置浏览器（基于旧版 WKWebView）也属此列，需同等对待
什么时候必须退回 JS 动态方案
如果你的项目仍需支持 iOS 15 或更早系统（比如企业内网、教育类 App 内嵌 WebView），100dvh 就不可用，得切回 JS 计算 + CSS 变量方式。
- 监听
resize和scroll事件（仅 iOS Safari 需要，Android Chrome 109+ 已支持dvh） - 用
window.innerHeight获取实时高度，写入:root的--vh变量 - CSS 中用
calc(var(--vh) * 100)替代100vh，避免单位转换误差 - 注意：不要只监听
resize，iOS Safari 在地址栏收起/展开时不一定触发该事件，scroll更可靠
新单位很香，但别忘了查 @supports；dvh 不是银弹，它只在“够新的环境”里才真正动态。老设备上，JS 回退仍是兜底刚需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
