iOS Safari 底栏遮挡问题需设 viewport-fit=cover 并配合 env(safe-area-inset-bottom) 计算底部安全距离，禁用 user-scalable=no，优先用 padding-bottom 而非 fixed 定位，安卓需 @supports 或 JS fallback。
viewport meta 标签没设对，iOS 底栏会吃掉页面底部
iPhone Safari 在滚动到底部时会收起地址栏和底栏，但网页如果没告诉浏览器“我需要适配这个行为”，就容易被突然出现的底栏挡住内容。关键不是 CSS 本身，而是 viewport 的配置没配合好。
常见错误现象：position: fixed; bottom: 0 的按钮在 iOS 上滚动后被底栏盖住，或者页面底部留白忽大忽小。
- 必须加
viewport-fit=cover，否则 Safari 不会把视口扩展到底栏下方 -
initial-scale=1和width=device-width不能少，否则viewport-fit失效 - 不要写
user-scalable=no—— 它会让viewport-fit=cover被忽略（Safari 的一个隐藏规则）
正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
safe-area-inset-bottom 需要手动用在 CSS calc 里
即使加了 viewport-fit=cover，CSS 也不会自动避开底栏区域。iOS 提供了四个环境变量，其中 env(safe-area-inset-bottom) 就是底栏高度（通常 34px 或 21px，取决于机型和系统版本），但得你自己算进去。
立即学习“前端免费学习笔记（深入）”；
使用场景：底部固定操作栏、TabBar、提交按钮等需要始终可见的内容。
- 直接写
padding-bottom: env(safe-area-inset-bottom)是最常用做法 - 如果用了
height: 100vh，得改成height: calc(100vh - env(safe-area-inset-bottom))，否则底部会被截 - Android 不支持
env()，但会忽略它，所以可以安全写，无需 hack
示例：
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
fixed 元素在 iOS 滚动时可能错位，别只靠 bottom: 0
iOS Safari 对 position: fixed 的实现有历史问题：滚动过程中，bottom: 0 会以初始视口为基准计算，而不是当前可视区域，导致底栏出现/收起时元素跳动或遮挡。
性能影响：频繁重排 + 环境变量读取会导致轻微卡顿，尤其低端 iPhone。
- 优先用
padding-bottom+env(safe-area-inset-bottom)推开内容，而不是靠fixed把元素“钉”在底部 - 如果必须用
fixed，建议加bottom: env(safe-area-inset-bottom)，并确保父容器没有 transform 或 will-change 干扰层叠上下文 - 避免在
fixed元素里再嵌套transform，这会触发 iOS 的渲染 bug，让底栏高度计算失效
安卓和微信 WebView 的 safe-area 行为不一致
安卓原生浏览器基本不支持 env(safe-area-inset-bottom)，微信 Android 版也长期不支持（直到 v8.0.45 才部分支持，且不稳定）。这时候 fallback 方案不能漏。
兼容性影响：纯靠 env() 会导致安卓端底部内容被刘海/导航键遮住。
- 用
@supports (padding-bottom: env(safe-area-inset-bottom))包裹 safe-area 相关样式，安卓自动跳过 - 给安卓准备一份兜底：比如用 JS 检测
window.innerHeight和screen.height差值，估算底部安全距离（虽然不准，但比没有强） - 微信内打开的页面，优先检测
weixinUA，然后加 class 做针对性调整，比如多加 10px padding
容易被忽略的是：有些安卓全面屏机型（如华为、小米）有虚拟导航栏，高度不固定，且无法通过 CSS 环境变量获取 —— 这时候只能靠 JS 动态测，或接受一点误差。
