css fixed全屏遮罩在刘海屏错位怎么办_添加padding并使用env安全区域变量完成适配

刘海屏下fixed全屏遮罩错位的解决核心是用env(safe-area-inset-top)动态补顶部内边距，并配合viewport-fit=cover声明，确保遮罩真全屏覆盖且内容避开刘海区域。

刘海屏（如iPhone X及后续机型）下，fixed全屏遮罩错位，本质是顶部状态栏（刘海区域）未被预留空间，导致内容被遮挡或偏移。解决核心是：**用 env(safe-area-inset-top) 动态获取顶部安全边距，并通过 padding-top 或 top 补齐**，同时确保遮罩真正“全屏覆盖且不溢出”。

1. 用 env(safe-area-inset-top) 补顶部内边距

对 fixed 遮罩容器（如 .mask），不直接设 top: 0，而是保留默认定位，靠 padding-top 抬高内容区域，避免遮罩本身被状态栏裁切：

• 添加 padding-top: env(safe-area-inset-top, 0px);
• 配合 height: 100vh;（而非 100%）保证高度撑满视口
• 若遮罩内有滚动内容，需额外加 overflow-y: auto; 并设 max-height: calc(100vh - env(safe-area-inset-top, 0px));

2. 配合 viewport-fit=cover 启用安全区域

仅 CSS 不够，必须在 HTML 的 中声明：

没有这句，iOS Safari 不会暴露 env() 变量，safe-area-inset-top 将始终返回 0px。

3. 遮罩层本身要“真全屏”，不依赖 top/left

避免写 top: env(safe-area-inset-top); 这类偏移，容易导致底部/侧边也错位。推荐结构：

• 遮罩用 position: fixed; top: 0; left: 0; width: 100%; height: 100%;
• 内部内容区（如弹窗、加载提示）单独包裹，再对其设 padding-top: env(safe-area-inset-top);
• 这样遮罩背景完整覆盖，内容区自动避开刘海，逻辑清晰不耦合

4. 兜底兼容：降级为固定值（可选）

部分旧版 iOS 或安卓刘海屏可能不支持 env()，可用 @supports 检测并降级：

.mask {
  padding-top: 20px; /* 旧设备兜底 */
}
@supports (padding-top: env(safe-area-inset-top)) {
  .mask {
    padding-top: env(safe-area-inset-top, 20px);
  }
}

基本上就这些。关键不是“把遮罩往下推”，而是让内容区尊重安全区域，遮罩本身保持原生全屏定位——既适配刘海，也不影响普通屏幕体验。