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

iPhone X 系统中 fixed 头部被刘海遮挡需用 top: env(safe-area-inset-top) 适配安全区域并配合 viewport-fitcover 元标签及兼容写法 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 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能