CSS如何保证移动端顶部Fixed头部的安全区域

iPhone X+ 系统中 fixed 头部被刘海遮挡，需用 top: env(safe-area-inset-top) 适配安全区域，并配合 viewport-fit=cover 元标签及兼容写法 top: constant() 和 top: 0。iPhone X+ 系统里 position: fixed 头部被刘海/圆角遮挡这是 Safari 和 iOS WebKit 的老问题：顶部 fixed 元素默认紧贴视口顶部（top: 0），但 iPhone X 及后续机型的「安全区域」（safe area）顶部有物理遮挡（刘海、传感器区域），导致内容被裁切。根本原因不是 CSS 写错了，而是浏览器没把「安全区域」边界当默认布局参考——它只认 viewport 高度，不自动避开刘海。必须显式用 env(safe-area-inset-top) 或 constant(safe-area-inset-top) 补出顶部空隙constant() 是旧版 iOS 11.0–11.2 的写法，已废弃但还得兼容；env() 是 iOS 11.2+ 标准，必须用不能只加 padding-top：固定头部需要的是「上移整个元素」，所以优先改 top 值如何正确设置 top 适配安全区域直接在 fixed 头部的样式里用 env() 替代固定数值，让浏览器动态计算顶部偏移量。示例：立即学习“前端免费学习笔记（深入）”；header { position: fixed; top: env(safe-area-inset-top); /* iOS 自动填值，如 44px */ top: constant(safe-area-inset-top); /* 降级，iOS 11.0–11.2 */ top: 0; /* 最终降级，所有其他设备 */ width: 100%; height: 44px;}顺序很重要：CSS 会按从下到上的顺序覆盖，所以 top: 0 放最后，确保无支持时 fallback 到默认行为不要写成 top: calc(env(safe-area-inset-top) + 44px)：这会让头部整体下移太多，实际高度变成「安全区空隙 + 自身高度」，视觉错位如果头部本身带背景或阴影，记得检查 env(safe-area-inset-top) 是否为 0（如安卓或桌面端），此时不应多出空白为什么加了 env() 还是被截？检查这三点常见失效不是语法问题，而是配套配置没跟上。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能