必须同时满足viewport-fit=cover、fixed元素自身加padding-bottom:env(safe-area-inset-bottom)、且该元素为body最后一个子节点，三者缺一都会导致bottom:0被Home Indicator遮挡。
直接加 padding-bottom: env(safe-area-inset-bottom) 不生效，大概率是三个条件漏掉了一个：viewport 声明没配、样式没加在 fixed 元素自身、DOM 位置不是 body 最后一个子节点。
viewport-fit=cover 必须显式声明
微信 iOS 客户端（尤其 8.0.45 及更早）对 env() 的支持强依赖 viewport 的 viewport-fit=cover。不写这句，env(safe-area-inset-bottom) 在大多数机型上返回 0，你加了也等于没加。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须放在里，且不能被 JS 动态插入（微信会忽略） - 不要写成
viewport-fit=contain或漏掉cover—— 后者会让安全区变量始终不可用 - 安卓端加了无害，但不会生效；别为它单独删掉这行
padding-bottom 必须加在 fixed 元素自身上
很多人把 padding-bottom: env(safe-area-inset-bottom) 写在父容器或 body 上，结果底部栏还是被遮——因为环境变量只对“当前元素”起作用，且必须配合 box-sizing: content-box 才能真正撑开内容区域。
一站式排查小程序隐私授权报错（errno 104 / buttonId is wrong 等）+ 标准修改模式。适用：隐私协议配置、隐私弹窗不弹、授权报错、隐私接口调用失败。已抽离具体项目，适用于任何微信小程序。
- 错误：
body { padding-bottom: env(safe-area-inset-bottom); }→ 不影响 fixed 子元素定位 - 正确：
.footer-bar { position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; } - 顺序不能颠倒：
constant()必须在前，否则 iOS 11.0–11.1 会整条规则失效
fixed 元素必须是 body 的最后一个子节点
微信 WebView（尤其 iOS）要求该 fixed 元素在 DOM 中是 body 的直接子节点，且排在最后。如果它被包在 <div id="app"> 或 <code><view class="container"></view> 里，env() 就会静默失效。
立即学习“前端免费学习笔记（深入）”；
- 结构示例（正确）：
<body> <main></main> <div class="footer-bar"></div> </body>
- 结构示例（错误）：
<body> <div id="app"> <main></main> <div class="footer-bar"></div> </div> </body> - 小程序中同理：不能把
<view class="footer"></view>放在<scroll-view></scroll-view>内部，必须提级到同级容器
主内容必须预留空间，否则会被 fixed 遮盖
fixed 元素脱离文档流，浏览器渲染主内容时完全不知道它存在。如果你只处理了底部栏，没给主内容加 margin-bottom，文字和按钮就会“长进”底部栏下面，iOS 键盘弹出时尤其明显。
- 计算公式：
margin-bottom = [固定栏真实高度] + env(safe-area-inset-bottom) - 真实高度不能硬写，比如
60px；应通过 CSS 自定义属性或 JS 注入（如--footer-height: 60px），再组合：margin-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom)); - 别用
padding-bottom替代——它会让内容区域变高，但滚动高度不变，最后一屏可能永远滚不到底
最常被忽略的是 DOM 顺序和主内容留白这两点。样式写了、viewport 也配了，但元素嵌套深了一层，或者忘了给 <main></main> 加 margin-bottom，问题就还在。不是 CSS 不灵，是微信的渲染链路比标准浏览器多绕了两道弯。
