只写 padding-bottom: env(safe-area-inset-bottom) 无效，必须配合 viewport-fit=cover 且作用于正确元素；缺 viewport-fit=cover 则 env() 恒为 0px；需在 fixed 底部栏自身或其父容器（非 html/body）设置 padding-bottom；calc() 混用需 Safari 15.4+；constant() 已废弃。
直接给结论：只写 padding-bottom: env(safe-area-inset-bottom) 是没用的，必须配合 viewport-fit=cover 且作用在正确元素上，否则返回 0px，底部按钮照旧被黑条吞掉。
viewport-fit=cover 缺了就全白搭
WebKit 只在视口明确声明允许延伸到安全区域时，才注入 safe-area-inset-* 环境变量。默认的 viewport-fit=auto（iOS WebView 的 fallback 行为）会让 env() 永远返回 0px，你写的那行 CSS 就等于没写。
-
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">必须完整存在，缺任意一项（比如漏了width=device-width）都可能失效 - 微信内置浏览器早期版本（如 8.0.22 之前）不支持
viewport-fit，此时env()不生效，得靠 UA 判断 + JS 注入降级 class - 某些 Hybrid 容器（如部分企业微信 WebView）会强制覆盖 viewport 设置，需检查实际渲染后的
<meta>是否被篡改
padding-bottom 是唯一靠谱的落点
想让底部 fixed 元素“浮”在黑条上方，不能只靠 bottom: env(safe-area-inset-bottom) —— 它只是把元素下推，但容器高度没变，内容仍可能被截断；margin-bottom 在脱离文档流的元素上也无效。
- 对
position: fixed; bottom: 0的导航栏，直接在该元素上设padding-bottom: env(safe-area-inset-bottom) - 对 flex 布局中靠
margin-top: auto推下来的底部栏，应把padding-bottom: env(safe-area-inset-bottom)加在父容器上 - 千万别对
<html>或<body>直接加padding-bottom，否则整个页面下移，顶部状态栏区域可能出空白或错位
calc() 里混用 env() 得看 Safari 版本
想加个 8px 间距？写 padding-bottom: calc(8px + env(safe-area-inset-bottom)) 看似合理，但 Safari 15.4 之前根本不认这种写法，整条声明会被丢弃。
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4+ 才稳定支持
calc()内混合单位 +env() - 低版本必须拆成两条：先写降级值
padding-bottom: 8px，再覆盖padding-bottom: calc(8px + env(safe-area-inset-bottom)) -
env()不支持乘除运算，calc(env(safe-area-inset-bottom) * 2)这种写法 Safari 直接忽略整条规则
constant() 已淘汰，别再用了
constant(safe-area-inset-bottom) 是 iOS 11.2 之前的临时方案，从 iOS 11.3 起已被废弃，且从未进入 CSS 标准。现在所有主流 iOS 设备（包括 iPhone 14/15 系列）都只响应 env()。
- 写
constant()纯属冗余，现代项目中可直接删掉 - PostCSS 插件如
postcss-env-function会把env()静态转成固定值，破坏动态性，禁用 - 安卓和旧 iOS 忽略
env()是正常行为，靠前缀降级（如padding-bottom: 0）即可，不用补constant()
最常被忽略的一点：安全区域是动态的。用户横屏、开启/关闭引导式访问、甚至某些辅助功能开启时，safe-area-inset-bottom 都可能实时变化。所以别想着 JS 一次性读取后缓存，CSS 的 env() 是唯一能响应这种变化的机制。
