padding-bottom: env(safe-area-inset-bottom) 不生效的根本原因是 viewport 未声明 viewport-fit=cover，或该样式未加在 position: fixed; bottom: 0 的元素自身上。
直接写 padding-bottom: env(safe-area-inset-bottom) 不生效，根本原因是 viewport 没声明 viewport-fit=cover，或者作用对象错了——它必须加在 position: fixed; bottom: 0 的元素自身上，不能加在 或 上。
viewport-fit=cover 缺一个字都不行
WebKit 只有在明确允许页面延伸进安全区域时，才会注入 env(safe-area-inset-*) 变量。默认的 viewport-fit=auto（比如微信旧版 WebView）会让所有 env() 返回 0px，等于白写。
-
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">必须完整存在，漏掉width=device-width或initial-scale=1都可能导致 iOS Safari 忽略该声明 - 真机调试时，可在 Safari 控制台运行
getComputedStyle(document.body).getPropertyValue('padding-bottom')，看是否返回类似"34px"；若为空或"0px"，说明环境变量未注入 - 某些 Hybrid 容器（如企业微信、部分 PWA 框架）会动态重写
<meta>，需检查渲染后 DOM 中该标签是否被篡改
fixed 底部元素必须自己加 padding-bottom
对 position: fixed; bottom: 0 的导航栏、按钮等，padding-bottom 是唯一能“撑开”其内容区域、避免被 Home Indicator 截断的方式。用 bottom: env(safe-area-inset-bottom) 反而会把整个元素上推，脱离底部，且不增加可点击高度。
- 正确写法：
.tab-bar { position: fixed; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } - 如果底部栏是 flex 布局中靠
margin-top: auto推下来的，padding-bottom要加在它的父容器（flex 容器）上，而不是它自己 - 绝对不要给
或加padding-bottom：会导致整页下移，顶部状态栏区域可能留白或错位
calc() 混用要盯紧 Safari 版本
想在安全区基础上再加 8px 间距？padding-bottom: calc(8px + env(safe-area-inset-bottom)) 在 Safari 15.4 之前完全不认，整条声明会被丢弃。
- 兼容写法（推荐）：
padding-bottom: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom));（后声明覆盖前声明） -
env()不支持乘除运算，calc(env(safe-area-inset-bottom) * 2)会被 Safari 直接忽略 - fallback 值建议写成
env(safe-area-inset-bottom, 34px)而非0px，避免老设备或降级场景出现塌陷
@supports 检测必须写对语法
@supports 不是查函数是否存在，而是检测某条 CSS 声明是否被识别为合法值。写错就等于没写，整块规则被跳过。
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) { .tab-bar { padding-bottom: env(safe-area-inset-bottom); } } - ❌ 错误：
@supports (env(safe-area-inset-bottom)) { ... }（语法非法） - ❌ 错误：
@supports (safe-area-inset-bottom: 34px) { ... }（这不是标准 CSS 属性） - 别在 React/Vue 的
style={{}}里写env()：JS 不解析 CSS 函数，只会当字符串透传，无效
最易被忽略的一点：env() 的生效依赖视口真实“透出”安全区域，而不仅是 CSS 写对了。一旦页面被嵌入不支持 viewport-fit 的 WebView（比如微信 8.0.22 之前版本），再严谨的 CSS 也无济于事——此时必须靠 UA 检测 + JS 注入降级 class 或固定像素 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
