env(safe-area-inset-*)必须配合viewport-fit=cover才能返回真实值，否则全为0px；需在meta中完整声明width=device-width、initial-scale=1.0和viewport-fit=cover，且iframe需独立配置，@supports须检测合法CSS声明如padding-top: env(safe-area-inset-top)。
env(safe-area-inset-*) 只有配合 viewport-fit=cover 才能返回真实值，否则全是 0px ——不是“不生效”，是系统压根没注入数值。
必须写对的 <meta name="viewport"> 配置
缺一个字符都不行，尤其不能漏 initial-scale=1.0，iOS Safari 会因此拒绝启用 env()：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover是开关，不是可选项；设成auto或contain（默认值）时，env(safe-area-inset-top)等全部返回0px - 多个 JS 库（如某些 UI 框架）可能动态重写
<meta>，真机调试时用控制台检查最终 DOM 中的content值是否仍含viewport-fit=cover - iframe 嵌套页无法继承父页的
viewport-fit，子页必须自己声明
@supports 检测必须写成合法 CSS 声明
检测目标不是“函数是否存在”，而是“该整条声明能否被浏览器识别为有效 CSS”：
- ✅ 正确：
@supports (padding-top: env(safe-area-inset-top)) { ... } - ❌ 错误：
@supports (env(safe-area-inset-top)) { ... }（语法非法，整个块被丢弃） - ❌ 错误：
@supports (safe-area-inset-top: 44px) { ... }（这不是标准 CSS 属性） - 检测失败时，浏览器直接跳过整条规则，所以 fallback 样式必须写在
@supports外层，不能只靠它兜底
只对 padding 有效，margin 和 top/bottom 会错位
安全区变量本质是“建议留白尺寸”，不是定位偏移量。用错属性会导致布局断裂：
立即学习“前端免费学习笔记（深入）”；
-
padding-bottom: env(safe-area-inset-bottom, 0px)✅ 推荐：作用于position: fixed的底部容器本身，让内容上推，避开 Home Indicator -
margin-bottom: env(safe-area-inset-bottom)❌ 危险：破坏 flex/grid 高度计算，父容器可能塌缩或子项溢出可视区 -
bottom: env(safe-area-inset-bottom)❌ 更危险：元素从视口底边向上偏移，结果悬在黑条上方，反而更难点击 - fallback 值别写
0，推荐34px或20px，直屏设备也适用，不会多出空白
旧版 iOS 兼容要按顺序写，constant() 必须在 env() 前面
iOS 11.0–11.1 只认 constant()，11.2+ 开始废弃它、只支持 env()。CSS 层叠顺序决定谁生效：
.tabbar {
padding-bottom: 34px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
- 顺序不能反：如果
env()写在前面，旧版 Safari 会跳过不认识的函数，继续解析下一条；反过来写就全失效 - 现代项目（2026 年绝大多数设备已升级）可只保留
env()，但若需支持 iOS 11.0–11.1，必须三段式书写 -
safe-area-inset-left和safe-area-inset-right在绝大多数设备上恒为0px，除非你明确适配曲面屏（如 iPhone 14 Pro 横屏），否则不用管
最常被忽略的是：真机调试时，不要只看样式面板里写的值——运行 getComputedStyle(document.body).getPropertyValue('padding-bottom')，确认返回的是带 px 的数字，而不是空字符串或 fallback 值。这一步能立刻区分是配置错了，还是浏览器根本不支持。
