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