优先使用100dvh配合@supports(height: 100dvh)隔离并保留min-height: 100vh兜底，不支持时用节流JS动态设置--vh变量；iOS Safari中100vh基于初始视口高度计算，无法响应地址栏伸缩导致底部悬空或遮挡。
直接用 100dvh 替代 100vh，但必须包裹在 @supports (height: 100dvh) 里，并保留 min-height: 100vh 作为兜底；不支持时再上 JS 动态方案，否则页面高度会塌成 auto。
为什么 100vh 在 iOS Safari 里会遮挡底部内容
iOS Safari 的 100vh 基于初始 layout viewport 计算，固定为地址栏展开时的高度，滚动后地址栏收起，可视区域变高，但 100vh 值不变，导致容器底部“悬空”或被新露出的地址栏顶起——不是样式写错，是单位本身就不响应视觉视口变化。
-
100svh是最小可视高度（地址栏完全展开时），滚动后反而比当前屏幕还小，造成底部留白 -
-webkit-fill-available在 height 上行为不稳定，Chrome 不识别，且同样冻结在初始值 - 硬写
calc(100vh - 75px)完全不可靠：iPhone 12/15/SE 尺寸、系统版本、横竖屏下工具栏高度差异极大
优先用 100dvh + @supports 隔离
这是目前最干净、无 JS、兼容 iOS 16+ 和 Safari 16.4+ 的方案，但隔离方式极易出错：
- 必须把
height: 100dvh单独写在@supports (height: 100dvh)块内，不能和100vh混在同一声明里——Safari 会直接忽略整条规则 - 外部声明仍要保留
min-height: 100vh，确保 iOS 15 及微信 WebView 等旧环境有基础高度 - 示例写法：
section.full-height {
min-height: 100vh;
}
@supports (height: 100dvh) {
section.full-height {
height: 100dvh;
}
}不支持 dvh 时用 JS 动态更新 --vh
当目标环境需兼容 iOS 15 或微信内置浏览器时，JS 方案不可省，但必须节流且精准作用：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 监听
resize事件，每次触发时执行document.documentElement.style.setProperty('--vh', ${window.innerHeight * 0.01}px) - 必须用
requestAnimationFrame或setTimeout(0)包裹更新逻辑——iOS 上resize触发极频繁，不节流会导致强制同步布局、严重卡顿 - 只对加了
data-dynamic-height的元素应用动态高度，例如：.page[data-dynamic-height] { height: calc(var(--vh, 1px) * 100); }，避免全局重排 - 页面加载完成时务必立即执行一次，否则首屏可能闪动或留白
fixed 底部栏错位？别用 fixed，改用 absolute 锚定父容器
地址栏伸缩导致 fixed 元素定位失准，本质是它锚定的是视觉视口而非容器——绕过这个问题最稳的方式是换锚点：
- 把底部栏的
position: fixed改成position: absolute - 其父容器（如
<body>或根<div id="app">）设为position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; - 该父容器加
height: 100vh; min-height: -webkit-fill-available;，后者专为 iOS 旧版100vh解析不准兜底 - 底部栏保持
bottom: 0; left: 0; right: 0;，此时它就锚定在父容器底部，不再受地址栏伸缩干扰 - 额外加
transform: translateZ(0)到底部栏自身上，触发 GPU 合成层，防快速滚动时偶发错位
真正容易被忽略的点是：所有这些方案都依赖 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">。漏掉这行，env(safe-area-inset-bottom)、dvh、甚至 -webkit-fill-available 都可能失效。
