env() 仅 iOS 11.2 Safari 支持须用 supports (padding-top: env(safe-area-inset-top)) 检测并设合理 fallbackAndroid 不支持 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 或状态栏高度估算值别用 0safe-area-inset-* 四个常量的实际取值逻辑iOS 只在有物理遮挡刘海、Home Indicator时才注入非零值横屏、折叠屏、第三方壳等场景下这些值可能动态变化不能当静态常量记死。env(safe-area-inset-top)仅在有刘海或前置摄像头挖孔时 0常规直屏为 0env(safe-area-inset-bottom)有 Home Indicator全面屏 iPhone时为 34px无则为 0env(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 标签里。 唱鸭 音乐创作全流程的AI自动作曲工具集 AI 辅助作词、AI 自动作曲、编曲、混音于一体