应使用 dvh 替代 vh 实现动态全屏布局，iOS 16.4+ 和 Chrome 100+ 原生支持；旧版需通过 scroll/resize/orientationchange 监听 + requestAnimationFrame 节流更新 CSS 自定义属性 --dvh 作为 fallback。
移动端 Safari 地址栏遮挡导致
不等于可视高度
在 iOS Safari（尤其是 iOS 15+）中，
指的是整个设备视口高度（device-height），而不是当前滚动时用户实际看到的区域。地址栏收起/展开会动态改变可视区域，但
值不变，导致内容被遮挡或留白。
典型现象：固定底部按钮被地址栏盖住；全屏轮播图顶部被切掉；
的容器在页面滚动后出现错位。
不要依赖
实现“真·全屏”布局，尤其在需要底部交互的场景
iOS Safari 不支持
（dynamic viewport height）直到 iOS 16.4，旧版本必须降级处理
安卓 Chrome 支持
较早（Chrome 100+），但需注意 WebView 兼容性
用
替代
是最简方案（iOS 16.4+ / Chrome 100+）
是 CSS 新单位，代表“动态视口高度”，会随地址栏显隐自动更新，比
更贴近用户真实可见区域。
直接替换即可生效，无需 JS 干预：
立即学习
“
前端免费学习笔记（深入）
”；
仅当目标环境明确支持时才用 —— 可通过
做条件覆盖
不支持时，
会被浏览器忽略，需 fallback 到
或 JS 计算值
与
数值差异在 iOS 上可达 100px+（地址栏高度），不能简单估算
兼容旧版 iOS 的 JS 回退：监听
+
动态更新高度变量
对 iOS 15 及更早版本，必须用 JS 获取实时可视高度，并写入 CSS 自定义属性供样式使用。
关键点不是“获取一次”，而是“感知变化”：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
仅监听
不够 —— iOS Safari 地址栏显隐不触发 resize，要加
和
避免高频更新：用
节流，否则滚动卡顿
初始高度必须在 DOM ready 后立即设置，否则首屏渲染仍用错误
示例核心逻辑：
CSS 中这样用：
为什么不用
或
？
依赖父元素高度，在 flex/grid 容器里常失效；
（small viewport height）是“最小可能视口高度”，固定为地址栏展开时的高度，无法响应收起动作 —— 它解决的是另一类问题（比如弹窗防滚动穿透），不是地址栏遮挡。
在 iOS Safari 中支持度差（iOS 16.4+ 才有），且数值偏小，会导致内容永远显示不全
（large viewport height）同理，是地址栏收起时的高度，但无法应对用户手动拖出地址栏的场景
三者（
/
/
）行为差异极大，混用会放大布局错乱
真正可靠的只有
（新环境）+ JS 动态
（旧环境），其他都是权宜之计。
最麻烦的不是写法，而是 iOS 地址栏行为本身没有标准事件通知 —— 它藏在滚动惯性、缩放、甚至键盘唤起的副作用里，所以 fallback 必须带容错和节流。
100vh100vh100vhheight: 100vh100vhdvhdvhdvhvhdvhvhbody {
height: 100dvh; /* ✅ 动态适配 */
}
.fullscreen {
height: 100dvh; /* ✅ 滚动时不会错位 */
}@supports (height: 100dvh)100dvh100vhdvhvhresizescrollresizescrollorientationchangerequestAnimationFramevhfunction updateDvh() {
document.documentElement.style.setProperty('--dvh', `${window.innerHeight}px`);
}
updateDvh();
window.addEventListener('scroll', updateDvh, { passive: true });
window.addEventListener('resize', updateDvh);
// 注意：iOS 有时 scroll 不稳定，可加定时 fallback（如 300ms 重置）.fullscreen {
height: 100dvh;
height: calc(var(--dvh, 100vh) * 1);
}100%100svh100%100svhsvhlvhsvhlvhdvhdvh--dvh