必须同时满足viewport-fit=cover、fixed元素自身加padding-bottom:env(safe-area-inset-bottom)、且该元素为body最后一个子节点，三者缺一都会导致bottom:0被home indicator遮挡；constant()需兼容旧版ios，calc()混用需safari 15.4+支持。
为什么 bottom: 0 在微信 iOS 里总被遮住
因为微信内置浏览器（尤其 8.0.32 之前版本）对 viewport-fit=cover 的解析不稳定，导致 env(safe-area-inset-bottom) 返回 0，bottom: 0 实际落在 Home Indicator 下方。这不是你 CSS 写错了，是环境变量根本没生效。
必须同时满足三个条件：
- <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- position: fixed 元素本身加 padding-bottom: env(safe-area-inset-bottom)
- DOM 结构中该元素必须是 的最后一个子节点（不能包在 <div id="app"> 里）<p>漏掉任意一条，底部按钮就可能半截不可点。</p>
<h3>padding-bottom: env(safe-area-inset-bottom) 该加在哪</h3>
<p>加在固定定位容器自身上，不是父容器，也不是 <code>body。目标是让内容“撑开”到安全区之上，而不是把整个栏往下推。
错误写法：bottom: env(safe-area-inset-bottom) —— Safari 会静默丢弃整条声明，不报错也不生效。
正确组合（含兼容）：padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
如果栏高固定为 60px，就写：height: 60px;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
别只靠 padding 帽子式撑高——否则安卓 WebView 里会多出空白，iOS 里又撑不够。
微信安卓端要不要适配 safe-area-inset-bottom
绝大多数安卓机型（华为、小米、OPPO 等）压根不支持 env(safe-area-inset-bottom)，但加了也无害；它只在 iOS WKWebView / Safari 中起作用。
安卓的底部导航栏高度不统一（常见 48px、64px、80px），也没有标准 API 获取。所以实际策略是：
- 保留 env() 和 constant() 写法（iOS 有效，安卓忽略）
- JS 检测是否为安卓：navigator.userAgent.includes('Android')
- 若是，动态给底部栏加 padding-bottom: 48px（或根据 window.visualViewport?.height 差值估算）
注意：不要用 UA 判断 iOS 版本再决定是否加 env()——微信 iOS 客户端的内核版本和系统版本不一致，容易误判。
fixed 底部栏导致正文内容被遮挡怎么办
position: fixed 脱离文档流，主体内容不会自动避开它。滚动时文字/按钮可能直接钻进底部栏下面，尤其在键盘弹出后更明显。
解决方式不是调 z-index，而是预留空间：
- 主体内容容器（如 <main></main>）加 padding-bottom，值同底部栏的总高度（含安全区）
- 或用 margin-bottom，但需确保该 margin 不被父容器 overflow: hidden 截断（某些安卓 WebView 会这样）
更稳妥的做法：
然后 JS 动态修正：document.body.style.paddingBottom = 'calc(60px + env(safe-area-inset-bottom))'（注意低版本 Safari 不支持 calc + env 组合，得 fallback）
真正容易被忽略的是：键盘弹出时，visualViewport.height 会突变，此时要监听 resize 和 focusin 事件重算 padding，否则安卓上依然遮挡。
