iphone全面屏底部被遮是因未启用安全区，需viewport-fit=cover声明+padding-bottom:env(safe-area-inset-bottom)配合，缺一不可；微信旧版需js降级为34px，主内容须预留calc(60px+env(safe-area-inset-bottom))空间。
为什么 bottom: 0 在 iPhone 全面屏上被遮住
不是 CSS 写错了，是视口没放开安全区。iOS 默认把 position: fixed 元素的 bottom: 0 锚定在“安全区底边”下方，而 Home Indicator 就在那条线下面——结果按钮可渲染、不可点。关键在于：env(safe-area-inset-bottom) 这个变量默认为 0，除非你显式启用安全区扩展。
必须加的 viewport 声明和 padding 写法
缺一不可，否则 env(safe-area-inset-bottom) 永远返回 0：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">——viewport-fit=cover必须和width=device-width、initial-scale=1.0同时存在 - 底部栏自身加
padding-bottom: env(safe-area-inset-bottom)，不是加在或父容器上 - 别写
bottom: env(safe-area-inset-bottom)—— Safari 会静默丢弃整条声明 - 如果栏高固定为 60px，就写
height: 60px; padding-bottom: env(safe-area-inset-bottom)，靠 padding 把内容“顶上去”，而不是靠 bottom 推位置
微信 iOS 客户端兼容性 fallback 方案
微信 8.0.32 之前版本会忽略 viewport-fit=cover，导致 env() 始终为 0。此时需 JS 检测并降级：
- 用
navigator.userAgent匹配MicroMessenger和 iOS 版本号 - 检测失败时，直接设
padding-bottom: 34px（iPhone X/XS 系列典型值） - 低版本 Safari（15.4 之前）不支持
calc(8px + env(safe-area-inset-bottom))，要拆成两行：padding-bottom: 8px;和padding-bottom: calc(8px + env(safe-area-inset-bottom));，后者会覆盖前者
主体内容不被遮挡的关键处理
fixed 元素脱离文档流，主体滚动时文字/按钮会钻进底部栏下面。最稳解法是主动预留空间：
- 给主内容区域（比如
<main></main>或内容包裹<div>）加 <code>padding-bottom: calc(60px + env(safe-area-inset-bottom)) - 别用
margin-bottom—— 某些安卓 WebView 对 fixed 元素的 margin 计算不一致 - DOM 结构上，底部栏必须放在
最末尾，否则部分安卓 WebView 因父容器overflow: hidden会截断 fixed 元素 - 绝对不要在
上设overflow: hidden，否则键盘弹出时 fixed 元素会被裁剪
真正容易被忽略的是：安全区变量不是“自动生效”的，它依赖 viewport 声明、元素定位方式、DOM 顺序三者严格配合；任何一环缺失，都会退化成裸 bottom: 0，全面屏下必被遮。
