fixed底部导航被Home Indicator遮住是因为position: fixed只认物理视口底边，不感知iOS安全区；需用@supports检测+bottom: constant()/env()渐进降级，并为主内容预留空间。
fixed底部导航为什么被Home Indicator遮住
因为 position: fixed 只认物理视口底边，不感知 iOS 的安全区——iPhone X 及后续机型底部的 Home Indicator（约34px高）是系统级覆盖层，bottom: 0 会直接把它压在下面，按钮点不到、视觉被裁切。
这不是 CSS 写错了，是定位机制本身没留出安全距离。常见现象包括：TabBar 最后一个图标半透明、点击无响应、阴影被截断。
- 只加
padding-bottom: 34px不行：直屏设备多出空白，圆角屏可能又不够 - 只写
bottom: env(safe-area-inset-bottom)不行：iOS 11.0–11.1 不支持env()，整条规则失效 - 在
body上设padding-bottom不行：会影响scrollHeight和IntersectionObserver行为
@supports 检测必须写对，否则整段CSS被丢弃
@supports (padding-top: env(safe-area-inset-top)) 是唯一可靠的检测方式，它不是检查函数是否存在，而是验证“把 env() 当作某个属性值是否合法”。写错就等于没写。
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) { .tabbar { bottom: env(safe-area-inset-bottom); } } - ❌ 错误：
@supports (env(safe-area-inset-bottom))（语法非法，整个块被忽略） - ❌ 错误：
@supports (safe-area-inset-bottom: 34px)（这不是 CSS 属性） - Android WebView 不支持该检测，也不该用它——这是纯 iOS 特性，别指望它在安卓生效
constant() 必须写在 env() 前面，顺序不能反
iOS 11.0–11.1 仅支持 constant()，11.2+ 才支持 env()；CSS 层叠规则决定了谁生效——浏览器按顺序解析，遇到第一个合法值就停。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序：
bottom: 0; bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); - 如果把
env()放前面，老 iOS 直接跳过整条声明，回退到bottom: 0，还是被遮住 -
constant()在新版 Safari 中已被废弃但保留兼容，不报错；env()是当前标准，必须共存 - 别在 React/Vue 的
style={{ bottom: 'env(safe-area-inset-bottom)' }}里硬塞——JS 不解析 CSS 函数，只会当字符串透传，最终渲染为无效值
主内容区域必须手动预留空间，且不能靠 body padding
fixed 元素脱离文档流，主内容不会自动“感知”它存在。你得主动给内容区留出底部空间，否则文字/按钮会钻进 tabbar 下方。
- 推荐写法：
main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }，其中60px是 tabbar 实际高度（含 padding/border） - fallback 值别设
0px，用0px或空字符串在部分微信 WebView 中会导致计算异常，建议显式写env(safe-area-inset-bottom, 34px) - 绝对不要在
body上设padding-bottom：它会改变document.body.scrollHeight，影响滚动监听和虚拟列表逻辑 - 如果用了 flex/grid 布局，
margin-bottom容易被折叠，padding-bottom更可靠
getComputedStyle(document.querySelector('.tabbar')).getPropertyValue('bottom')，看返回的是 "34px" 还是 "0px"——这比查 UA 或猜版本更直接。环境变量是否注入，只取决于 viewport-fit=cover 是否生效、@supports 是否写对、以及声明顺序是否合理，跟设备型号无关。 
