100svh无法解决Safari工具栏遮挡，因其仅响应软键盘、不感知地址栏/工具栏显隐；应改用100dvh并配合env(safe-area-inset-bottom)适配底部安全区。
直接用 100svh 替代 100vh 无法解决 Safari 底部工具栏遮挡——svh 只响应软键盘，不响应地址栏/工具栏收放。
为什么 svh 对 Safari 工具栏无效
svh（small viewport height）是浏览器原生识别「软键盘弹出」后计算出的最小可用高度，仅在 iOS 16.4+/Chrome 109+/Edge 109+ 中生效。但它完全不感知 Safari 地址栏或底部工具栏的显隐状态——哪怕用户上滑收起工具栏，svh 值也不会变。
典型表现：height: 100svh 的容器在工具栏收起时仍留白，在工具栏展开时又突然被遮住，和 100vh 行为几乎一致。
-
svh≠ “当前可见视口高度”，它只和键盘强绑定 - 地址栏遮挡属于 浏览器 UI 层动态覆盖，不是输入法行为，
svh不参与该逻辑 - 若同时存在键盘 + 工具栏，
svh只反映键盘影响后的高度，无法叠加工具栏偏移
真正该用的是 dvh，不是 svh
dvh（dynamic viewport height）才是专为解决地址栏/工具栏遮挡设计的单位，iOS 16.4+ 和 Chrome 100+ 原生支持。它会随工具栏收放实时更新，值等于用户此刻实际能看到的视口高度。
实操建议：
- 全屏容器：把
height: 100vh改成height: 100dvh - 必须加降级：用
@supports not (height: 100dvh) { ... }回退到 JS 动态计算方案 - 不要混用
dvh和svh在同一布局层级，它们触发条件完全不同 - 注意 WebView 兼容性：iOS WKWebView 默认不启用
dvh，需确认viewport-fit=cover已设置
env(safe-area-inset-bottom) 是补位关键
即使用了 100dvh，Safari 底部工具栏收起时仍可能让 fixed 元素紧贴屏幕底边——因为 dvh 给的是“可用高度”，但没告诉你要把内容往上提多少才能避开工具栏落点。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
这时必须配合 env(safe-area-inset-bottom)：
- 给底部 fixed 区域加
padding-bottom: env(safe-area-inset-bottom) - 若需绝对定位到底部，用
bottom: env(safe-area-inset-bottom) - 该环境变量在 iOS 11.2+ 就已支持，且只在有安全区域时返回非零值，无需 JS 判断
- 安卓不支持该变量，所以需用
@supports隔离，或结合 UA 检测降级
fallback 必须用 window.visualViewport，别信 window.innerHeight
旧版 iOS（dvh 不可用，此时不能靠 window.innerHeight 动态设 CSS 变量——它在工具栏收放时会抖动、延迟甚至卡死。
正确 fallback 方式：
- 监听
visualViewport.resize事件（比resize更精准） - 读取
visualViewport.height，而非innerHeight - 用
requestAnimationFrame节流更新--dvh自定义属性 - 确保初始渲染也执行一次，避免白屏或错位
复杂点在于：工具栏收放过程是渐进动画，visualViewport.height 会连续变化，而 CSS 单位是离散采样。这意味着你得接受轻微的“追不上”现象，但比硬写 75px 这类 magic number 稳定得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
