必须添加viewport-fit=cover，否则iOS Safari中env(safe-area-inset-top)恒为0px；需三层兜底使用env()，fixed元素应通过inset或calc位移而非padding，@supports检测须写为padding-top: env(safe-area-inset-top)。
viewport-fit=cover 必须加，否则 env() 全是 0px
不加这句 meta，env(safe-area-inset-top) 在 iOS Safari 里永远返回 0px，不是兼容性问题，是 Safari 的硬性限制。真机上写了也白写。
必须确保 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 存在且没被 JS 或框架（比如某些 PWA 插件）覆盖。Chrome DevTools 的响应式预览完全不模拟这个行为，只靠模拟器测等于没测。
常见错误：
- 漏掉
viewport-fit=cover，只写initial-scale=1 - 用 JS 动态插入 meta 标签，但时机太晚（DOMContentLoaded 后才加）
- uni-app 或 Taro 等框架自动生成的 meta 被默认设为
contain，需手动覆盖
env() 不能裸用，fallback 必须前置 + calc() 包裹
padding-top: env(safe-area-inset-top) 是高危写法——iOS 11.1、Android WebView、桌面浏览器会直接丢弃整条声明，导致顶部塌陷。必须用三层兜底：
- 先写 fallback：
padding-top: 44px（保守估计状态栏高度） - 再写 calc + env：
padding-top: calc(44px + env(safe-area-inset-top, 0px)) - env 第二参数
0px不是万能 fallback，部分浏览器会忽略它；真正可靠的是calc()自身的容错机制
注意：calc(env(safe-area-inset-top) * 2) 在 Safari 15.4 之前全部失效，只支持加减运算。
fixed 元素别碰 padding，改用 bottom/inset 或 margin
给 position: fixed; bottom: 0 的 tabbar 加 padding-bottom: env(safe-area-inset-bottom) 没用——fixed 元素脱离文档流，padding 只撑父容器，按钮反而被“推”到屏幕外看不见。
正确做法是位移元素本身：
- 用
bottom: calc(env(safe-area-inset-bottom) + 8px)（推荐，控制定位基准） - 或用
inset: auto 0 env(safe-area-inset-bottom) 0（现代写法，兼容性略差） - 也可用
margin-bottom: env(safe-area-inset-bottom)，但会意外撑高父容器高度，影响滚动区域
如果用了 z-index，确保该元素层级高于 Safari 地址栏（通常 z-index: 9999 足够）。
@supports 检测要写对，别信 UA 判断
@supports (env(safe-area-inset-top)) 是非法语法，整块 CSS 规则会被浏览器忽略。正确写法必须把 env() 放进属性声明里：
@supports (padding-top: env(safe-area-inset-top)) { ... }
别用 UA 字符串判断是否为 iOS——微信内置浏览器、PWA、WKWebView 均可能伪装成 Safari，但实际不支持 env()；也不能只查 webkit 前缀，iOS 15+ 已移除部分依赖。
真正可靠的验证方式只有两个：
- 真机 Safari 打开页面，用
getComputedStyle(document.body).getPropertyValue('padding-top')查值 - 检查
window.visualViewport?.height 是否为 true（启发式 fallback）
安卓设备基本不提供 safe-area-inset-*，哪怕有挖孔屏，也别把它当跨平台方案用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
