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() 还是被截？检查这三点
常见失效不是语法问题，而是配套配置没跟上。
-
<meta name="viewport">必须含viewport-fit=cover，否则 iOS 不启用安全区域变量：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 某些 UI 框架（如 Vue Router 的
<router-view></router-view>或 React 的createPortal）可能把 header 渲染到 body 外层，导致脱离视口上下文，env()计算失准 - iOS 15.4+ 对
env()在某些嵌套transform或overflow: hidden容器中支持不稳定，可临时给父容器加will-change: scroll-position缓解
安卓和折叠屏要不要处理？
目前主流安卓浏览器（Chrome、Edge）不支持 env(safe-area-inset-top)，也不会因刘海主动裁切 fixed 元素——它们要么全屏渲染，要么靠系统状态栏 API（如 window.visualViewport）控制，但那是 JS 层面的事。
所以纯 CSS 方案里：env() 只对 iOS 有效，对安卓无影响也无害；只要不依赖它做关键布局（比如把按钮位置完全交给 env() 计算），就不用额外 hack。
折叠屏（如 Galaxy Z Fold）目前没有统一的安全区域 CSS 变量标准，仍需 JS 检测 screen.availHeight 或 window.innerHeight 动态调整。
真正容易被忽略的是：开发时用 Chrome 模拟 iPhone X 尺寸，但 Chrome 的「safe area」模拟只是视觉示意，env() 变量根本不会生效——真机调试不可跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
