env(safe-area-inset-top) 仅在 iOS Safari 或 iOS Chrome 中生效，且必须同时满足：viewport-fit=cover 已启用、@supports 检测语法正确（如 padding-top: env(...)）、WebKit 内核支持；缺一不可。
直接说结论：只写 env(safe-area-inset-top) 没用，必须同时满足三个硬条件——viewport-fit=cover 在 <meta> 里、@supports 检测语法正确、且运行在 WebKit 内核（iOS Safari 或 iOS Chrome）上；缺一不可。
viewport-fit=cover 是开关，不是可选项
所有 env(safe-area-inset-*) 值默认都是 0px，除非你显式打开这个开关。系统只在 viewport-fit=cover 启用时才注入真实像素值。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须完整写在中，initial-scale=1.0不能省，漏一个字符或空格都不行 - PWA、uni-app、Taro 等框架常在 JS 中动态重写
<meta>，导致viewport-fit=cover被覆盖丢失——真机调试时用 Safari 开发者工具检查document.querySelector('meta[name=viewport]').content确认是否还在 - 微信内置浏览器（X5 内核）、旧版 QQ 浏览器、绝大多数安卓 WebView 都无视该属性，
env()永远返回0px，别靠 UA 判断，要用@supports实锤
@supports 检测必须写成合法 CSS 声明
@supports 不是查函数是否存在，而是检测某条 CSS 规则能否被浏览器识别为合法声明。写错就等于没写，整块规则被丢弃。
- ✅ 正确：
@supports (padding-top: env(safe-area-inset-top)) { header { padding-top: env(safe-area-inset-top); } } - ❌ 错误：
@supports (env(safe-area-inset-top)) { ... }（语法非法） - ❌ 错误：
@supports (safe-area-inset-top: 44px) { ... }（这不是标准 CSS 属性） - 安卓设备基本不支持该检测，别指望它返回
true；iOS 11.2+ 才真正支持env()，11.0–11.1 只认constant()，所以仍需降级写法
fixed 元素被刘海遮住？别碰 padding
position: fixed 元素脱离文档流，padding-top 对它完全无效。想让顶部导航栏不被刘海盖住，必须改定位偏移，靠层叠顺序 fallback。
- 正确顺序：
top: 0; top: constant(safe-area-inset-top); top: env(safe-area-inset-top);（constant()必须在env()前面，否则 iOS 11.1 下整条失效） - 现代写法可用
inset: env(safe-area-inset-top) auto auto auto;，但兼容性略弱于重复写top - 别在 React/Vue 的
style={{ top: 'env(safe-area-inset-top)' }}里硬塞——JS 不解析 CSS 函数，只会透传字符串，最终计算值是env(safe-area-inset-top)字面量，不是像素值 - fallback 值别设
0，推荐20px或44px，这样在直屏设备上也不会因多出空白破坏布局
env() 返回值带单位，max() 是最稳的兜底姿势
直接定义 --safe-top: env(safe-area-inset-top) 很危险：不支持的环境里变量值为 unset，后续所有依赖它的 calc() 都会静默失效。
- 安全做法是用
max()包一层：--safe-top: max(0px, env(safe-area-inset-top, 0px)); -
env()第二个参数是 fallback 值，但仅当环境变量未定义时才生效；max()能确保即使env()返回0px或非法值，最终结果仍是可控的 - 注意：所有
env()返回值都自带单位（如44px），不能在calc()里直接加数字，必须写成calc(var(--safe-top) + 8px)，而不是calc(var(--safe-top) + 8)
最容易被忽略的点是：env() 不是“写了就能用”的通用函数，它是 WebKit 专属的、强依赖视口配置的、需要层层 fallback 的环境变量。真机调试时，永远用 getComputedStyle(document.body).getPropertyValue('padding-top') 直接读取计算值，比看代码更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
