真正可用的是env(safe-area-inset-top)等环境变量，需配合viewport-fit=cover和@supports检测才能可靠生效，且须注意兼容写法、fallback值及单位使用限制。
没有叫“SafeArea属性”的CSS东西，真正可用的是env(safe-area-inset-top)这类环境变量，且必须配合viewport-fit=cover和@supports才能可靠生效。
viewport-fit=cover 必须加在 meta 里，缺一个字都不行
只写env()但没配viewport-fit=cover，所有safe-area-inset-*值都是0px——不是“没生效”，是系统根本没注入数值。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须完整存在，initial-scale=1.0不能省，否则 iOS Safari 不启用env() - 微信内置浏览器、部分安卓 WebView（如旧版 QQ 浏览器）即使写了
viewport-fit=cover也不支持env()，别靠 UA 判断，要用@supports实锤 - 真机调试时，在控制台运行
getComputedStyle(document.body).getPropertyValue('padding-top')，看返回值是不是带px的数字，而不是空字符串或 fallback 值
@supports 检测必须写对，否则整条规则被丢弃
@supports (padding-top: env(safe-area-inset-top))不是检测函数是否存在，而是检测该声明是否被浏览器识别为合法 CSS 值。写错就等于没写。
- ✅ 正确：
@supports (padding-top: env(safe-area-inset-top)) { ... } - ❌ 错误：
@supports (env(safe-area-inset-top))（语法非法，整个@supports块被忽略） - ❌ 错误：
@supports (safe-area-inset-top: 44px)（这不是 CSS 属性） - fallback 值别设
0，推荐20px或44px，直屏设备也适用，不会破坏布局
fixed 元素被刘海盖住，别用 padding-top
position: fixed元素贴着视口顶部，padding-top对它完全无效——那是内容内部空间，动不了位置。必须改定位偏移。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
top: 0; top: constant(safe-area-inset-top); top: env(safe-area-inset-top);（CSS 层叠顺序生效） - 顺序不能反：
constant()必须在env()前面，iOS 11.0–11.1 才能 fallback；top: 0放最后兜底 - 别在 React/Vue 的
style={{ top: 'env(safe-area-inset-top)' }}里硬塞——JS 不解析 CSS 函数，只会当字符串透传 - 如果头部有背景色或阴影，注意
env(safe-area-inset-top)在非刘海设备上是0px，别因此多出意外空白
底部 Home Indicator 小黑条比顶部更难搞
底部position: fixed; bottom: 0的 TabBar、按钮常被遮挡，padding-bottom同样无效——因为 fixed 元素脱离文档流。
- 推荐用
inset（现代写法）：inset: env(safe-area-inset-top) auto env(safe-area-inset-bottom) auto; - 兼容写法：
margin-bottom: env(safe-area-inset-bottom);，再 fallback 到margin-bottom: 20px; - Android 厂商支持极不统一：Pixel 系列基本支持，小米/OPPO 多数 WebView 不识别
env()，不能依赖 - 不要全局重置
body的padding/margin——会破坏第三方组件（如地图、弹窗）的布局流
最易被忽略的点：所有env()值都是带单位的（比如44px），不能裸奔进calc()乘除运算；calc(env(safe-area-inset-top) * 2)直接失效，只能做加减；calc(env(safe-area-inset-top) + 8px)才安全。
