真正可用的是env(safe-area-inset-top)等环境变量，需配合meta中viewport-fit=cover及@supports(padding-top:env(safe-area-inset-top))检测，否则ios safari不注入变量或整条规则失效。
没有叫“SafeArea属性”的CSS东西，真正能用的是 env(safe-area-inset-top) 这类环境变量，且必须配合 viewport-fit=cover 和 @supports 才能在真机上生效。
viewport-fit=cover 必须加在 meta 里，缺一个字都不行
不加这句，env(safe-area-inset-top) 永远返回 0px——不是写错了，是 iOS Safari 根本没注入这些变量。系统默认用 viewport-fit=auto（等价于 contain），把页面锁在传统安全区里。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须完整出现在中 - 构建工具（如 Vite 插件）、PWA 配置、或 JS 动态重写 meta 的逻辑，都可能把它覆盖掉；上线前务必检查最终 HTML 源码
- 别混用
height=device-height，它会干扰视口计算，导致env()失效或高度异常 - 微信 X5 内核、旧版 QQ 浏览器等第三方 WebView 对
viewport-fit=cover支持极差，真机测不可跳过
@supports 检测必须写对语法，否则整块规则被丢弃
写成 @supports (env(safe-area-inset-top)) 是非法语法，浏览器直接忽略整个 @supports 块。正确检测方式是把 env() 放进具体声明里，让浏览器判断该 CSS 是否可解析执行。
- ✅ 正确：
@supports (padding-top: env(safe-area-inset-top)) { ... } - ❌ 错误：
@supports (env(safe-area-inset-top)) { ... }（语法非法） - ❌ 错误：
@supports (safe-area-inset-top: 44px) { ... }（这不是 CSS 属性） - 不加检测，iOS 11.1 及更早版本会直接丢弃整条规则，不是取 0，而是“消失”，导致顶部塌陷
- fallback 值别设
0，推荐20px或44px，直屏设备也适用
fixed 元素被刘海盖住，别用 padding-top
position: fixed 元素贴着视口顶部，padding-top 是内容内部空间，对它完全无效。必须改定位偏移。
- 正确写法：
top: 0; top: env(safe-area-inset-top);（CSS 层叠顺序生效） - 顺序不能反：先写兜底值，再写
env()；浏览器会自动覆盖 - 别在 React/Vue 的
style={{ top: 'env(safe-area-inset-top)' }}里硬塞——JS 不解析 CSS 函数，只会当字符串透传 - 如果头部有背景色或阴影，注意
env(safe-area-inset-top)在非刘海设备上是0px，别因此多出意外空白 - 底部
position: fixed; bottom: 0的 tabbar 同理，要用bottom: env(safe-area-inset-bottom)，不是padding-bottom
横屏、软键盘弹出时 env() 不会自动更新
iOS 的 env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 只在视口尺寸变化（比如旋转）时触发更新。软键盘弹出时视口高度缩了，但 env() 值还维持原样——结果就是底部按钮被顶到屏幕中央，留白过大。
- CSS 无解，这是 iOS Safari 和多数 WebView 的已知限制
- 若需动态响应键盘，得监听
resize或使用 JS 获取window.innerHeight做补偿，但要注意横屏下env()值也会变（竖屏约44px，横屏约24px） - 别用
calc(100vh - env(safe-area-inset-bottom))做全高布局——滚动时100vh会变，导致底部错位 - 安卓设备（包括 Chrome 90+）基本不识别
viewport-fit=cover，也完全不支持env()，别指望它触发适配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
