env(safe-area-inset-top) 在 iOS 11.1 及更早版本中不被解析，导致整条 CSS 规则失效，必须用 @supports (padding-top: env(safe-area-inset-top)) 检测并配合 constant() 降级，且声明顺序为 constant() 在前、env() 在后、0 在最后。
直接用 env(safe-area-inset-top) 会炸——旧版 Safari（iOS 11.1 及更早）根本解析不了，整条 CSS 规则被丢弃，不是值为 0，而是“消失”。必须加 @supports 检测或用 constant() 降级，否则上线即刘海遮头。
为什么 env(safe-area-inset-top) 单独写就失效
iOS 11.2+ 才真正支持 env() 函数；11.0–11.1 只认 constant()；再早的版本连这两个都不支持。更关键的是：@supports (padding-top: env(safe-area-inset-top)) 是唯一合法检测方式——@supports (env(safe-area-inset-top)) 语法错误，浏览器直接忽略整条 @supports 块。
- 不检测就直接写
padding-top: env(safe-area-inset-top)→ iOS 11.1 下该样式整行报废，fallback 不生效 -
env()和constant()必须按“降级顺序”声明：先写constant()，再写env()，CSS 会自然覆盖 -
safe-area-inset-top在直屏 Android、桌面端、iPad 竖屏下恒为 0，不是 bug，是设计行为
fixed 头部被刘海盖住，只加 padding-top 没用
顶部 position: fixed 元素被遮挡，本质是它紧贴视口顶部（top: 0），而刘海在物理屏幕顶端。此时要移动的是元素本身位置，不是内部留白。
- 正确做法：改
top值，不是padding-top——top: constant(safe-area-inset-top); top: env(safe-area-inset-top); top: 0; - 顺序不能错：
top: 0放最后，确保无支持时回退到默认行为 - 如果头部有背景色或阴影，注意
env(safe-area-inset-top)为 0 时别多出空白（可加@supports控制仅在支持设备生效） - 别在 React/Vue 的
style={{ top: 'env(safe-area-inset-top)' }}里写——JS 不解析 CSS 函数，只当字符串透传，浏览器不执行
viewport-fit=cover 是前提，不是可选项
env() 和 constant() 只在 viewport-fit=cover 模式下注入有效值；默认的 contain 或 auto 下，系统自动缩放页面避开刘海，safe-area-inset-* 全为 0。
- 必须加 meta 标签：
- 微信内置浏览器、iOS WebView 都支持
viewport-fit=cover，但部分安卓 WebView（如旧版 UC）会忽略，此时env()返回 0，不影响布局 - 不要用
calc(100vh - env(safe-area-inset-bottom))做全高容器——滚动时100vh动态变化，底部会跳变
横屏、折叠屏、iPad 多任务下值会变，别硬编码
safe-area-inset-top 不是常量，是运行时由系统注入的动态值。iPhone 横屏时它仍为 0，但 safe-area-inset-left 或 safe-area-inset-right 可能在 iPad Pro 多任务侧滑时非零。
- 竖屏 iPhone X–15：只有
top和bottom可能非零（top=44px，bottom=34px） - iPad Pro 横屏 + 侧边栏：
left或right可达 16px～32px，不能假设为 0 - 别在 JS 里读取
getComputedStyle(el).paddingTop拿这个值——返回的是字符串"env(safe-area-inset-top)"，不是计算后数值 - 需要 JS 响应变化？监听
resize事件，配合window.visualViewport?.height或screen.orientation间接判断
最易被忽略的点：所有 @supports 检测必须包裹完整声明块，不能只包一条属性；constant() 已废弃但仍是 iOS 11.0–11.1 唯一解，删了它，那两年的用户就看到刘海切头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
