Safari移动端viewport高度不等于可视区域高度，因vh基于完整视口而非动态变化的实际可见区；应使用env(safe-area-inset-bottom)配合viewport-fit=cover实现精准适配。
移动端 Safari 的 viewport 高度不等于可视区域高度
这是根本原因：Safari 在滚动时会隐藏地址栏和底部工具栏，vh 单位始终基于“完整视口高度”（含可能被遮挡的工具栏），而非当前实际可见区域。当你用 height: 100vh 布局全屏容器时，内容底部常被上推、错位或截断——尤其在页面刚加载或滚动后工具栏状态变化时。
env(safe-area-inset-bottom) 是唯一可靠锚点
iOS 11+ 提供了四个 env() 函数来读取安全区边距，其中 env(safe-area-inset-bottom) 直接对应底部工具栏高度（通常为 34px 或 0px，取决于是否展开）。它会随工具栏动态变化，比 JS 监听 resize 更及时、无延迟。
实操建议：
- 用
padding-bottom: env(safe-area-inset-bottom)替代固定padding-bottom: 34px，让内容避开工具栏 - 若需“真·全高”容器（如背景色撑满），用
min-height: calc(100vh + env(safe-area-inset-bottom))补齐收缩后的缺口 - 必须搭配
viewportmeta 的viewport-fit=cover才能启用env()变量：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
不要依赖 window.innerHeight 或 resize 事件
JS 获取的 window.innerHeight 在 Safari 中存在严重滞后：滚动停止后数百毫秒才更新，且多次触发 resize 事件无法区分工具栏显隐。用户快速上下滑动时，布局反复抖动、错位。
更糟的是，iOS 16+ 对非全屏 PWA 限制了 innerHeight 的精度，返回值常为四舍五入后的整数，无法匹配真实像素级偏移。
所以：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 避免用 JS 动态写
style.height或 class 切换 - 禁用基于
resize的“重算高度”逻辑，哪怕加了防抖也不稳定 - 如果必须用 JS（比如 Canvas 渲染），只读一次
env(safe-area-inset-bottom)的计算值：getComputedStyle(document.documentElement).getPropertyValue('padding-bottom')，但优先走纯 CSS 方案
兼容 fallback 要写在 env() 前面
CSS 中 env() 不被识别时会直接失效，导致 padding 或 height 为 0。必须把降级值写在前面，利用层叠覆盖：
padding-bottom: 34px;<br>padding-bottom: env(safe-area-inset-bottom);
注意顺序不能反；也不能用 calc(34px + env(...)) 混合写法——一旦 env() 无效，整个 calc 表达式崩掉。
其他常见坑：
-
env(safe-area-inset-bottom)在桌面 Safari 或非 iOS 设备中返回空字符串，务必测试 fallback 是否生效 - 使用
position: fixed的底部按钮，需同时设bottom: env(safe-area-inset-bottom)，否则会被工具栏盖住 - 微信内置浏览器（iOS）也支持
env()，但部分旧版微信 WebView 有解析 bug，建议加@supports (padding-bottom: env(safe-area-inset-bottom))包裹
最易忽略的其实是 viewport-fit=cover 这个 meta 属性——没它，env() 全部失效，且毫无报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
