应使用 top: env(safe-area-inset-top) 配合 @supports 降级至 top: 0，而非 statusBarHeight 或固定值；需搭配 position: sticky/fixed，避免 calc() 冗余计算，并监听 resize 应对地址栏动画抖动。
移动端吸顶导航栏如何用 env(safe-area-inset-top) 适配状态栏
直接写 top: 0 在 iPhone X 及后续机型上会导致导航栏被刘海/圆角区域遮挡，必须用 env(safe-area-inset-top) 动态读取系统状态栏高度。
这个 CSS 环境变量由 iOS 和部分 Android 浏览器原生支持，值为当前设备顶部安全区（状态栏+地址栏）的高度，单位是 px。它不是 JS 计算值，不依赖 JS 加载时机，也不受页面缩放或横竖屏切换延迟影响。
-
env(safe-area-inset-top)在 Safari、Chrome for iOS、Edge for iOS 中均可用；Android Chrome 从 91+ 开始支持，旧版 WebView 需降级 fallback - 必须搭配
position: sticky或position: fixed使用，单独写无效 - 不能直接用于
margin-top或padding-top（某些旧版 Safari 不识别），只推荐用于top属性 - 务必设
top: env(safe-area-inset-top)，而不是top: calc(env(safe-area-inset-top) + 0px)——后者在 Safari 15.6 之前会解析失败
为什么不能只靠 env()，还得加 @supports 降级
env(safe-area-inset-top) 不是所有环境都返回有效数值：iOS 11.0–11.2 返回 0，Android WebView 可能完全不识别，甚至某些调试工具里会返回 NaN。硬写会把导航栏压到视口外。
正确做法是用 @supports 包裹，并提供 top: 0 fallback：
nav {
position: -webkit-sticky;
position: sticky;
top: 0; /* fallback */
}
@supports (top: env(safe-area-inset-top)) {
nav {
top: env(safe-area-inset-top);
}
}
- 不要用
if (CSS.supports(...))在 JS 里动态写 style —— 这样会触发重排，且无法覆盖初始渲染 - 如果用了
backdrop-filter，记得把env()值也同步进 transition，否则top变化时模糊效果会跳变 - 某些安卓定制浏览器（如华为 EMUI 内置浏览器）会把
env(safe-area-inset-top)误报为 24px（实际为 0），此时需结合 UA 判断或监听resize事件做二次校验
滚动中 env(safe-area-inset-top) 会突变吗？怎么应对
会。iOS Safari 地址栏收起/展开时，env(safe-area-inset-top) 的值不变，但 window.innerHeight 变了，导致导航栏“相对位置”偏移——这不是变量问题，而是视口尺寸抖动引发的视觉错位。
真正要防的是滚动过程中因地址栏动画带来的误判，不是 env() 本身：
- 监听
resize事件，当window.innerHeight变化 > 10px 时，强制触发热重绘（比如给 nav 加个transform: translateZ(0)） - 不要在 scroll 回调里反复读
getBoundingClientRect().top来比对吸顶状态——这个值在地址栏动画期间剧烈抖动，不可信 - 若同时用了 JS 驱动的透明度过渡（如
--alpha），请确保它的计算逻辑不依赖scrollY绝对值，而改用document.scrollingElement.scrollHeight - window.innerHeight算真实滚动进度
最易被忽略的一点：Safari 某些版本下，env(safe-area-inset-top) 在页面刚加载时可能未就绪，导致首屏导航栏短暂错位。保险起见，可在 中内联一段极简 CSS，用 @media (prefers-reduced-motion: reduce) 或 @media (width >= 375px) 做粗略兜底，比完全没 fallback 强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
