viewport-fit=cover 必须与 width=device-width、initial-scale=1.0 同时写在 viewport meta 中，缺一不可；@supports 检测需用 padding-top: env(...) 等完整声明语法；fixed 元素应使用 top/bottom 或 inset 配合 env() 偏移，fallback 推荐 44px 或 20px。
viewport-fit=cover 必须写对，否则 env() 全部返回 0px
env(safe-area-inset-top) 这类变量不是“默认可用”的——iOS 只在明确启用全屏渲染时才注入数值。缺了 viewport-fit=cover，哪怕写了十遍 env(safe-area-inset-bottom)，计算样式里看到的也全是 0px。
正确写法必须完整包含三部分：width=device-width、initial-scale=1.0、viewport-fit=cover。漏掉 initial-scale=1.0，Safari 就不激活 env()；写成 viewport-fit: cover（冒号）或拼错字母，同样无效。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">- 别让 JS 动态重写 meta 标签，PWA 或某些 UI 框架会覆盖它
- 真机调试时，在控制台运行
getComputedStyle(document.body).getPropertyValue('padding-top')，确认返回值是带px的数字，不是空字符串或0px
@supports 检测必须用声明语法，不能只写函数名
浏览器对 @supports 的解析非常严格：写成 @supports (env(safe-area-inset-top)) 是非法语法，整块 CSS 规则会被直接丢弃，连 fallback 都不会生效。
真正有效的检测方式，是把 env() 放进一个合法的 CSS 声明中，比如 padding-top: env(...)，让浏览器判断该声明是否被识别为有效值。
- ✅ 正确：
@supports (padding-top: env(safe-area-inset-top)) { .header { padding-top: env(safe-area-inset-top, 44px); } } - ❌ 错误：
@supports (env(safe-area-inset-top)) { ... }（语法错误，规则失效） - ❌ 错误：
@supports (safe-area-inset-top: 44px) { ... }（这不是标准 CSS 属性） - 检测建议放在
:root或通用容器上，避免重复写多遍
fixed 元素被刘海/小黑条遮挡？padding 不起作用，得改定位
padding-top 只影响内容内部空间，对 position: fixed 的导航栏或底部按钮完全无效。顶部 fixed 元素被刘海盖住，是因为它的 top: 0 紧贴视口顶部，而刘海就在那里。
正确做法是用 top 或 inset 直接偏移元素本身：
- 顶部导航栏：
top: 0; top: env(safe-area-inset-top, 44px);（层叠生效，后写的覆盖前写的） - 底部 TabBar：
bottom: 0; bottom: env(safe-area-inset-bottom, 34px); - 更现代写法（推荐）：
inset: auto 0 env(safe-area-inset-bottom, 34px) 0;（inset是top/right/bottom/left的缩写，语义更清晰） - 注意单位不能省：
env(safe-area-inset-bottom, 34px)中的34px必须带单位，34会失效
fallback 值别设 0，也别硬塞到 React/Vue 的 style 对象里
env() 的 fallback 不是“兜底显示”，而是“不支持时的实际取值”。设成 0px 会导致直屏 iPhone 或老设备上导航栏紧贴状态栏，文字被裁切。
推荐保守 fallback：44px（覆盖多数刘海高度）或 20px（兼顾紧凑布局），既安全又不会撑爆页面。
- 别在 JSX 或模板中写：
style={{ top: 'env(safe-area-inset-top)' }}—— JS 不解析 CSS 函数，只会当纯字符串透传，最终变成top: env(safe-area-inset-top)，但没@supports包裹，可能被忽略 - 也不要在同一个规则里混用
constant()和env()：Safari 15+ 已彻底移除constant()，留着反而增加维护负担 - 如果用了
height: 100vh，再加padding-bottom: env(...)会造成双倍留白，应改用min-height: 100vh+ 安全区适配
最常被忽略的一点：env() 的值是动态的。比如 Safari 地址栏自动隐藏时，safe-area-inset-top 会从 88px 变成 44px；横屏时 safe-area-inset-left 和 safe-area-inset-right 才真正起作用。别只测竖屏、别只信模拟器——真机上滚动、切换方向、唤出地址栏，都得看实际值是否变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
