viewport-fit=cover缺失是失效主因，微信8.0.22前版本不透传该参数致env(safe-area-inset-bottom)恒为0px；需完整声明meta且用@supports(padding-bottom:env(safe-area-inset-bottom))检测。
viewport-fit=cover 缺失是失效主因
微信内置浏览器（8.0.22 之前版本）不透传 viewport-fit=cover，导致 env(safe-area-inset-bottom) 恒为 0px。这不是 CSS 写错了，而是系统变量根本没被注入。
必须用完整、无干扰的 声明：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- 漏掉
width=device-width或initial-scale=1.0，部分 WKWebView 会降级为viewport-fit=auto - 混入已废弃的
target-densitydpi，整个content解析失败，viewport-fit被静默忽略 - 微信 8.0.22+ 已支持，但企业微信或某些定制壳仍可能强制覆盖——需真机检查渲染后 DOM 中的 是否仍存在
@supports 检测必须带属性名和值
不能靠 navigator.userAgent 判断 iOS 版本：微信、PWA、桌面版 Safari 都可能伪装或行为不一致；也不能用已废弃的 @supports (-webkit-safe-area-inset-top: 0)。
唯一可靠写法是：@supports (padding-bottom: env(safe-area-inset-bottom))
立即学习“前端免费学习笔记（深入）”；
-
@supports (env(safe-area-inset-bottom))是语法错误，整块规则会被跳过 - 该检测只对 WebKit 有效，Android 浏览器直接忽略整个
@supports块 - 检测成功后，里面才能安全使用
env()，否则 fallback 逻辑不会触发
fixed 底部元素不能靠 padding-bottom 推开
给 <body> 或父容器加 padding-bottom: env(safe-area-inset-bottom)，对 position: fixed; bottom: 0 的按钮完全无效——fixed 元素脱离文档流，不受父级 padding 影响。
真正起作用的是定位偏移：
- 推荐用
inset：inset: auto 0 env(safe-area-inset-bottom) 0 - 或显式设
bottom：bottom: env(safe-area-inset-bottom, 34px)（单位px不能省） - 若用了
z-index，确保值高于系统 UI 层（Safari 地址栏默认约1000）
安卓和旧 iOS 必须 JS 降级兜底
安卓所有版本都不支持 env()，返回值始终为 0px；iOS 11.0–11.1 只认 constant()，且该函数已在 iOS 15+ 彻底移除。
纯 CSS 无法跨平台兜底，必须配合 JS：
- 检测
window.navigator.userAgent中是否含MicroMessenger和iPhone，再结合screen.height / screen.width粗略判断机型 - 对安卓或微信旧版，动态添加降级 class，如
.tabbar--android，走固定像素方案（如padding-bottom: 34px） - 不要在 React/Vue 的
style={{}}里写env()—— JS 当字符串透传，浏览器根本不解析
最易被忽略的是：你看到 env() 返回 0px，未必是 bug；它可能只是告诉你“这台设备没有底部安全区”，比如 iPad mini 5 或直屏安卓机。先确认 是否生效、层叠顺序有没有写错，再动代码。
