必须用env(safe-area-inset-bottom)并配@supports检测，且中需含viewport-fit=cover，否则ios下env返回0px；padding-bottom用于容器，margin-bottom或calc()用于fixed底部元素；env()不可用于js内联样式。
直接结论：只用 env(safe-area-inset-bottom)，别单独写 constant()；必须配 @supports 检测，且 <meta name="viewport"> 里缺 viewport-fit=cover 就全失效。
为什么写了 env(safe-area-inset-bottom) 却没生效
最常见原因是 <meta name="viewport"> 缺了 viewport-fit=cover。iOS 默认是 auto，此时 WebKit 根本不注入任何 safe-area-inset-* 变量，env() 全部返回 0px，不是报错，而是“静默失败”。
-
viewport-fit=cover必须和width=device-width, initial-scale=1同时存在，单独加没用 - 微信小程序基础库低于 2.20.0 的版本（对应 iOS WebView 内核较老），即使写了
cover也可能不支持 —— 这时只能靠 JS 注入 class 降级 - 真机测试不能只信模拟器；部分企业微信或钉钉内置浏览器会忽略
viewport-fit
padding-bottom 和 margin-bottom 用哪个
语义和效果完全不同，选错会导致底部按钮“掉出视口”或滚动异常。
- 对容器类元素（如
<main></main>、<footer></footer>）用padding-bottom: env(safe-area-inset-bottom)：内容自然上移，布局流不变 - 对
position: fixed; bottom: 0的导航栏，用margin-bottom: env(safe-area-inset-bottom)或更推荐bottom: calc(env(safe-area-inset-bottom) + 8px)：避免单纯设bottom: 0被遮挡 - 绝对不要对
或直接设padding-bottom：会把整个页面下推，顶部状态栏可能被切掉
@supports 怎么写才可靠
不能只靠 UA 判断 iOS 版本，因为微信基础库、系统固件、WebView 内核版本三者不一致。唯一可行的是特性检测。
- 必须写成
@supports (padding-bottom: env(safe-area-inset-bottom))，不能写@supports (env(safe-area-inset-bottom))（语法错误） - fallback 值要合理：比如
padding-bottom: 20px，而不是0；iOS 11.2 以下连@supports都不支持，所以默认值必须先写在外部 - 不要用
@supports not (...)，iOS 11.2 以下直接忽略整条规则
body {
padding-bottom: 20px;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body {
padding-bottom: env(safe-area-inset-bottom);
}
}
calc() 里混用 env() 的兼容性坑
Safari 15.4 之前不支持 calc(8px + env(safe-area-inset-bottom)) 这种带单位混合运算，整条声明会被丢弃。
- 低版本 Safari 必须拆开写：
padding-bottom: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)) -
env()不支持乘除：calc(env(safe-area-inset-bottom) * 2)在 Safari 中无效，整行 CSS 被跳过 - PostCSS 插件如
postcss-env-function会把env()静态替换为固定值，彻底失去动态性，禁用
最容易被忽略的一点：所有 env() 必须出现在 CSS 样式表或 <style></style> 标签里，JS 内联样式（如 style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}）完全不生效 —— 浏览器不解析字符串里的 CSS 函数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
