env() 仅 ios 11.2+ safari 支持，须用 @supports (padding-top: env(safe-area-inset-top)) 检测并设合理 fallback；android 不支持 env()，需用 display-cutout 和 viewport-fit 适配。
env() 函数在 iOS 11.2+ 中才能安全使用
直接写 env(safe-area-inset-top) 在旧版 Safari（比如 iOS 11.1 或更早）会解析失败，导致整个 padding / margin 声明被丢弃——不是值为 0，而是整条 CSS 规则失效。
必须配合 @supports 检测，否则刘海区适配会“突然消失”在老设备上：
header {
padding-top: 20px; /* fallback */
}
@supports (padding-top: env(safe-area-inset-top)) {
header {
padding-top: env(safe-area-inset-top);
}
}
- 只检测
env()是否可用，不检测具体参数名（safe-area-inset-top是 iOS 特有，Android 不支持，也不该用） - 不要写成
@supports (env(safe-area-inset-top))——语法错误，env()是函数，不是属性 - fallback 值建议设为合理默认（如 20px 或状态栏高度估算值），别用 0
safe-area-inset-* 四个常量的实际取值逻辑
iOS 只在有物理遮挡（刘海、Home Indicator）时才注入非零值；横屏、折叠屏、第三方壳等场景下，这些值可能动态变化，不能当静态常量记死。
-
env(safe-area-inset-top)：仅在有刘海或前置摄像头挖孔时 > 0，常规直屏为 0 -
env(safe-area-inset-bottom)：有 Home Indicator（全面屏 iPhone）时为 34px，无则为 0 -
env(safe-area-inset-left)和env(safe-area-inset-right)：目前所有 iPhone 都为 0，但 iPad Pro 横屏时可能非零（多任务侧边栏） - 别用
calc(100vh - env(safe-area-inset-bottom))做全高布局——滚动时100vh会变，导致底部错位
Vue/React 项目中 inline style 无法读取 env() 值
style={{ paddingTop: 'env(safe-area-inset-top)' }} 这种写法在 React/Vue 的内联样式中不会生效，因为 JS 层不解析 CSS 函数，只当字符串透传给 DOM，而浏览器要求 env() 必须出现在 CSS 样式表或 <style></style> 标签里。
- 必须走 CSS 类名控制，不能靠 JS 动态拼
env() - 如果需要 JS 获取安全区尺寸（比如 Canvas 绘图），要用
window.visualViewport+ 手动判断，或监听resize后查document.documentElement.style（不可靠） - Next.js / Vite 等构建工具对
env()无特殊处理，放心写在 .css/.scss 里即可
Android 刘海屏不支持 env()，别混用 constant()
constant(safe-area-inset-top) 是 iOS 11.0–11.1 的临时前缀，已被废弃；Android 官方从未实现 env() 或 constant()，所有所谓“Android env 支持”都是误传或 WebView 厂商私有补丁。
- Android 刘海适配靠
display-cutoutCSS 属性 +viewport-fit=covermeta 控制布局区域，和env()完全无关 - 不要写
env(safe-area-inset-top), constant(safe-area-inset-top)这种兜底——constant()在新 Safari 里已无效，且会污染 CSS 解析 - 真要兼容 Android 刘海，得用 JS 检测
navigator.userAgent或screen.availHeight差值做 hack，但稳定性差，慎用
env() 就是 iOS Safari 的专属机制，认清这点，比堆一堆兼容写法更省事。实际项目里，只要明确只跑在 iOS Webview 或 Safari 上，就只用 @supports + env() 这一套，其余平台另起方案。刘海高度不是固定值，它会随系统设置（如放大字体）、横竖屏、甚至辅助功能开关而变，任何硬编码像素值的思路都会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
