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) 动态撑开：

使用 padding-bottom 或 margin-bottom（推荐前者，不影响定位基准）：

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

如果必须用 bottom 偏移（比如 modal 底部按钮），可这样写：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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 条件，就等于没打开开关。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！