env()函数在iPhone X及后续刘海屏设备上返回非零安全区偏移值，其他设备返回0px；需配合viewport-fit=cover meta和@supports检测使用，不支持fallback语法，须用calc()或覆盖式声明实现兼容。
env() 函数在 iPhone X 及后续刘海屏设备上的实际取值
iOS 11+ 提供了四个 env() 环境变量，用于适配屏幕安全区域（safe area）：
env(safe-area-inset-top)、env(safe-area-inset-right)、env(safe-area-inset-bottom)、env(safe-area-inset-left)。
它们只在支持安全区域的设备（如 iPhone X、XS、12、14 Pro、15 Pro 等）上返回非零值；其他设备（包括大部分安卓机、旧 iOS 设备、桌面 Safari）返回 0px，且不会报错。
注意：env() 不是 CSS 变量，不能用 var(--x) 引用，也不能在 @supports 中直接检测——必须靠 @supports (padding-top: env(safe-area-inset-top)) 这种写法间接判断。
给固定定位元素（如底部导航栏）留出底部安全区
常见错误是直接写 bottom: 0，导致被 Home Indicator 遮挡。正确做法是用 env(safe-area-inset-bottom) 动态撑开：
bottom: 0，导致被 Home Indicator 遮挡。正确做法是用 env(safe-area-inset-bottom) 动态撑开：
使用 padding-bottom 或 margin-bottom（推荐前者，不影响定位基准）：
footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: env(safe-area-inset-bottom);
}
如果必须用 bottom 偏移（比如 modal 底部按钮），可这样写：
.action-btn {
position: absolute;
bottom: env(safe-area-inset-bottom);
}
⚠️ 注意：若父容器设置了 overflow: hidden，且子元素靠 env() 向下偏移，可能被截断——此时应确保父级也预留空间，或改用 padding 方案。
顶部状态栏与刘海区的兼容处理
iPhone X+ 的 env(safe-area-inset-top) 默认为 44px（状态栏高度），但仅在「全屏 Web App」（即添加了 <meta name="viewport" content="viewport-fit=cover">）时生效。缺这个 meta，iOS 会强制缩放页面并隐藏刘海区，env() 返回 0px。
关键配置必须同时满足：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">- CSS 中对需要避让的顶部元素（如 header）加
padding-top: env(safe-area-inset-top) - 避免在
body上设margin-top—— 它不响应env()变化，且可能破坏滚动锚点
env() 的 fallback 和降级兼容策略
env() 不支持 fallback 语法（如 env(safe-area-inset-bottom, 20px) 是无效的）。必须用 calc() 组合默认值：
padding-bottom: calc(10px + env(safe-area-inset-bottom));
更稳妥的写法是先设默认值，再用 @supports 覆盖：
立即学习“前端免费学习笔记（深入）”；
padding-bottom: 10px;
@supports (padding-bottom: env(safe-area-inset-bottom)) {
padding-bottom: env(safe-area-inset-bottom);
}
⚠️ 注意：@supports 检测必须写完整声明（属性 + 值），只写 @supports (env(safe-area-inset-bottom)) 无效。另外，Safari 14.5+ 才修复了部分 @supports 对 env() 的误判问题，老版本可能漏触发。
安全区域不是“自动适配”，而是提供尺寸线索；真正决定是否渲染到边缘的，是 viewport-fit=cover 和你是否主动用 env() 去响应它。漏掉 meta 或写错 @supports 条件，就等于没打开开关。 
