微信ios中bottom:0被遮住是因viewport-fit=cover缺失或env(safe-area-inset-bottom)未生效，须同时满足：meta设置cover、padding-bottom成对写且env()在后、fixed元素为body最后一个子节点。
为什么 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">—— 没这句，safe-area-inset-bottom在 iOS 上压根不计算 -
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);—— 必须成对写，且env()在后，否则 iOS 11.0–11.1 会失效 - 该
position: fixed元素必须是的最后一个子节点 —— 不能包在<div id="app"> 或其他 wrapper 里，否则 DOM 顺序错乱，安全区计算失效 <h3>padding-bottom: env(safe-area-inset-bottom) 该加在哪</h3> <p>加在固定定位容器自身上，不是父容器，也不是 <code>body。目标是让内容“撑开”到安全区之上，而不是把整个栏往下推。- 错误写法：
bottom: env(safe-area-inset-bottom)—— Safari 会静默丢弃整条声明，不报错也不生效 - 正确写法（含高度固定场景）：
height: 60px; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - 只对
position: fixed或position: absolute且bottom: 0（或带偏移如bottom: 20px）的元素生效；普通文档流中的<footer></footer>不需要加
安卓要不要写 env(safe-area-inset-bottom)
绝大多数安卓机型（华为、小米、OPPO 等）不支持
safe-area-inset-bottom，但写了也无害 —— 它只在 iOS WKWebView / Safari 中起作用。- 安卓的底部导航栏高度不统一（常见 48px、64px、80px），也没有标准 API 获取
- 实际策略：保留
constant()和env()写法（iOS 有效，安卓忽略）；再用 JS 判断：navigator.userAgent.includes('Android')，若是，则动态注入padding-bottom: 48px或基于window.visualViewport?.height差值估算 - 别用 UA 判断 iOS 版本再决定是否加
env()—— 微信 iOS 客户端内核版本和系统版本不一致，容易误判
最常被忽略的是 DOM 结构顺序和
viewport-fit=cover的缺失 —— 这两个问题不解决，后面所有 CSS 都白配。 - 错误写法：
