viewport-fit=cover是env(safe-area-inset-*)生效的硬性前提，缺省或写错将导致ios safari中该值恒为0px；必须在meta中显式声明，且fallback需前置并配合calc使用。
env(safe-area-inset-*) 不是“开了就能用”的开关，漏掉 viewport-fit=cover 或写错 fallback 顺序，真机上就等于没写。
viewport-fit=cover 是 env() 生效的硬门槛
没有这句 meta，env(safe-area-inset-bottom) 在 iOS Safari 中恒为 0px，无论设备有没有刘海或 Home Indicator。这不是兼容性问题，是 Safari 的设计逻辑：只有明确声明允许页面延伸到安全区，它才注入这些变量。
必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover缺一不可，写成contain或不写，env()就失效 -
initial-scale=1.0要带上，否则双击缩放后env()计算可能错乱 - Chrome DevTools 的响应式模式完全不模拟该行为，必须用真机 Safari 或 WKWebView 验证
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) 是最稳写法
单独写 padding-bottom: env(safe-area-inset-bottom) 是高危操作——老 iOS、安卓 WebView、桌面浏览器会直接丢弃整条声明，退回到上一个有效值（比如没设默认值就是 0），底部内容立刻被遮挡。
推荐写法始终包含三层保障：
- 先写 fallback 值：
padding-bottom: 16px - 再写 calc + env：
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) - env 第二参数
0px是兜底，但不能依赖它——部分浏览器不支持该语法，calc 才是真正可靠的托底机制
注意：calc(env(safe-area-inset-bottom) * 2) 这类乘除运算在 Safari 15.4 之前全部失效，只保留加减。
fixed 底部栏要用 margin-bottom 或 calc(bottom)，别碰 padding
给 position: fixed; bottom: 0 的 tabbar 加 padding-bottom 没用，它不改变元素自身位置，只撑开父容器高度，反而导致可滚动区域变大，手指上滑时按钮“掉进”安全区下方看不见。
正确做法是位移元素本身：
- 用
margin-bottom: env(safe-area-inset-bottom)—— 仅适用于 fixed 元素，且会撑高父容器 - 更推荐：
bottom: calc(env(safe-area-inset-bottom) + 8px)，直接控制定位基准点 - 绝对定位元素优先用
inset或bottom: calc(...)，避免bottom: 0硬编码
@supports 检测不可靠，fallback 必须无条件写在前面
@supports (padding-bottom: env(safe-area-inset-bottom)) 在部分 Safari 版本中检测不稳定，甚至返回假阳性。别指望它做“条件加载”，而是把 fallback 当作必需项无条件写入 CSS 流程。
错误示范：@supports (...) { padding-bottom: env(...) } —— 一旦检测失败或不支持 @supports（如 iOS 11.2），整个适配就归零。
正确姿势：所有用到 env() 的地方，都采用“默认值 + 覆盖值”两行写法，让层叠规则自动生效：
.footer { padding-bottom: 20px; }<br>.footer { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
这样即使环境不支持 env()，也能保底显示 20px。
真正容易被忽略的是：这些变量在非刘海设备（如 iPhone 8）上也存在，只是值为 0px；所以 fallback 不是“降级”，而是布局基线——它参与所有设备的渲染流程，不是备胎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
