移动端顶部沉浸式定位栏不能只靠 position: fixed，因 ios safari 等浏览器系统 ui 动态变化导致 fixed 元素遮挡或跳动；需用 padding-top: env(safe-area-inset-top) 配合 top: 0 来适配安全区。
移动端顶部沉浸式定位栏为什么不能只靠 position: fixed
因为 iOS Safari 和部分安卓 WebView 会把地址栏、状态栏等系统 UI 视为“可折叠区域”，position: fixed 元素默认锚定在视口（viewport）顶部，但系统 UI 收起/展开时，视口高度动态变化，导致固定栏被遮挡或突然跳动。单纯写 top: 0 + fixed 在 Safari 上尤其容易出现“初始显示正常，下拉后消失”或“返回页面时错位”的问题。
env(safe-area-inset-top) 是关键，但必须配合 padding-top 或 top
现代浏览器通过 env() 函数暴露安全区偏移量，其中 env(safe-area-inset-top) 就是状态栏（含刘海）占用的高度。但它不能直接用在 top 上做固定定位的偏移——因为 top 是相对于视口计算的，而 env() 值在 fixed 元素上可能不触发重排，尤其在 Safari 中表现不稳定。
更可靠的做法是：让定位栏本身保持 top: 0，然后用 padding-top 把内容区域“顶下去”，留出安全区空间：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: env(safe-area-inset-top);
/* 同时兼容老设备 */
padding-top: constant(safe-area-inset-top); /* iOS
- 必须同时写
constant()和env()，否则 iOS 11.1 及更早版本会失效 -
padding-top作用于内容区（比如.header内部文字或图标），不是给body加，否则整个页面会被顶下来 - 如果
.header高度固定（如 44px），padding-top会叠加在原有高度上，需用box-sizing: border-box控制尺寸
为什么不用 top: env(safe-area-inset-top)？
实测中，把 env(safe-area-inset-top) 直接赋给 top 在 Safari 下常无效——它不会随系统 UI 展开/收起实时更新，且在页面首次加载时可能取值为 0。更糟的是，某些安卓 WebView 对 top 中使用 env() 完全不识别，导致定位栏直接掉出屏幕顶部。
相比之下，padding-top 是布局属性，在安全区变化时能被正确响应（尤其配合 viewport-fit=cover 声明后）。所以优先走 padding 路线，而非试图“移动” fixed 元素的位置。
- 务必在
<meta name="viewport">中加上viewport-fit=cover，否则env()值恒为 0：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 若定位栏需要背景色延伸到状态栏下（即真正“沉浸”），需额外设置
background-clip: padding-box防止背景溢出 padding 区域 - 不要对
body或html设置padding-top来适配——这会让整个页面下移，滚动时 header 会脱离顶部
兼容性兜底与调试技巧
不是所有设备都支持 env()，尤其微信内置浏览器旧版本、QQ 浏览器等。上线前建议用 JS 检测并 fallback：
if (CSS && CSS.supports('padding-top', 'env(safe-area-inset-top)')) {
document.documentElement.classList.add('has-safe-area');
} else {
// 加载 polyfill 或设默认 padding
}
调试时打开 Safari 的「开发者工具 → Responsive Design Mode」，勾选「Device Frame」并切换 iPhone X/XS 等机型，再手动拖拽模拟地址栏收起——这是唯一能复现真实跳变的手段。Chrome 模拟器里的 env() 值通常是静态的，不可信。
最易被忽略的一点：当页面有横向滚动（比如轮播图超出视口宽度）时，env(safe-area-inset-top) 仍生效，但 fixed 元素可能因父容器 overflow-x: hidden 被截断——此时要确保 header 的父级没有意外的裁剪限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
