viewport-fit=cover 缺失会导致 env(safe-area-inset-top/bottom) 恒为 0px；必须用完整 meta 声明，配合 @supports (padding-top: env(safe-area-inset-top)) 检测并安全使用，fixed 元素需改 top 而非 padding，calc() 混用需兼容低版本 safari。
viewport-fit=cover 缺了就完全失效
env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 在 iPhone 14 系列（包括 Pro/Pro Max 的灵动岛机型）上不会返回真实值，除非 <meta name="viewport"> 显式声明 viewport-fit=cover。缺这一项，所有 env() 值恒为 0px，你写的 padding 或 top 就等于没写。
必须用完整、无干扰的写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
常见踩坑点：
- 漏掉
width=device-width或initial-scale=1.0，某些 WKWebView 会降级为viewport-fit=auto - 混入已废弃的
target-densitydpi，导致整个content解析失败，viewport-fit被静默忽略 - 在微信内置浏览器（8.0.22 之前）或部分企业微信 WebView 中，该 meta 可能被容器强制覆盖，需真机检查渲染后 DOM 中的
<meta>是否仍存在
@supports (padding-top: env(safe-area-inset-top)) 是唯一可靠检测方式
不能靠 navigator.userAgent 判断 iOS 版本——微信、PWA、桌面版 Safari 都可能伪装或行为不一致；也不能用 @supports (-webkit-safe-area-inset-top: 0)，这是已废弃的非标准写法。
正确检测只有一条：
@supports (padding-top: env(safe-area-inset-top)) {
里面才能安全使用 env()。注意：
-
@supports (env(safe-area-inset-top))是语法错误，必须带属性名和值形式 - iOS 11.0–11.1 只支持
constant()，但该函数已在 iOS 15+ 彻底移除，现在只保留env()+@supports即可，无需再写降级 - Chrome DevTools 的 iPhone 模拟器完全不模拟
env()，必须真机 Safari 或微信调试（开启“远程调试”）
fixed 元素被灵动岛遮挡？别加 padding-top，改 top
对 position: fixed; top: 0 的导航栏，加 padding-top: env(safe-area-inset-top) 是无效的——它只是把内容往下撑，fixed 元素依然钉在视口最顶上，照样被灵动岛盖住。
真正要动的是定位基准：
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
}
@supports (top: env(safe-area-inset-top)) {
.header {
top: env(safe-area-inset-top);
}
}
这样 fixed 元素才会随系统安全区动态上移。注意顺序：top: 0 必须写在 @supports 块外作为兜底，否则不支持时会塌陷。
calc() 混用 env() 得看 Safari 版本
想给底部按钮加个 8px 间距？写 padding-bottom: calc(8px + env(safe-area-inset-bottom)) 看似合理，但 Safari 15.4 之前根本不认这种写法，整条声明会被丢弃。
低版本兼容方案只有两条声明叠加：
.fixed-btn {
padding-bottom: 8px;
padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
关键限制：
-
env()不支持乘除运算，calc(env(safe-area-inset-bottom) * 2)会被 Safari 直接忽略整条规则 - 不要用
env()算全高，比如height: calc(100vh - env(safe-area-inset-top))，滚动时100vh动态变化，顶部会跳 - iPhone 14 Pro Max 的灵动岛高度不是固定值，竖屏约 44px，横屏会变，必须依赖 env() 动态读取，不能硬编码
最易被忽略的一点：env() 的生效前提是页面已“声明全屏权限”，而不是“写了 CSS 就自动适配”。所有逻辑都建立在 viewport-fit=cover 被正确解析且未被容器篡改的基础上——这点在 Hybrid 场景下尤其脆弱，真机验证不可跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
