最稳妥做法是用 @supports (-webkit-touch-callout: none) 包裹 env(safe-area-inset-top)，并将其应用于 fixed 头部元素的 height，配合 scroll-padding-top: calc() 和 resize 事件监听以应对 ios 环境突变。
env(safe-area-inset-top) 必须用 @supports 包裹才安全
直接写 padding-top: env(safe-area-inset-top) 在 Android WebView、旧版 Chrome 或桌面 Safari 里会返回空值或 0，导致顶部没留白，内容被状态栏裁切——这不是 bug，是规范行为。最稳妥的检测方式是 @supports (-webkit-touch-callout: none)，它能稳定识别 iOS WebKit 内核（包括 Safari 和大部分微信内置浏览器）。别用 @supports (padding-top: env(safe-area-inset-top))，这个在 Safari 中常误判为不支持。
padding-top 加在 body 上容易失效，优先作用于 fixed 头部本身
给 body 加 padding-top 看似省事，但一旦页面有 position: fixed 的头部，它的 top: 0 会和 body 的 padding 重叠或相互抵消，尤其在地址栏收起/展开时触发重排，导致遮挡反复出现。更可控的做法是：把 padding-top 明确加在固定头部元素上，并配合 height 声明（而非 top + height 混用）。
header { position: fixed; top: 0; width: 100%; height: calc(60px + env(safe-area-inset-top)); }- 同时确保该
header的子内容用box-sizing: border-box，避免内边距撑高后溢出 - 若头部含 logo 或文字，需检查字体大小是否在
env(safe-area-inset-top)较大时（如 iPhone 15 Pro）仍可读
scroll-margin-top 和 env() 叠加会导致锚点跳转偏移过大
当页面启用锚点跳转（比如点击目录跳到 #faq），且你同时设置了 scroll-margin-top: 60px 和 env(safe-area-inset-top)，两者会相加——在刘海屏上可能达到 100px+，目标元素被顶得过高。正确做法是统一用 calc() 合并：
html { scroll-padding-top: calc(1rem + env(safe-area-inset-top)); }
注意：必须设在 html 元素上（滚动容器是根元素），body 上无效；Safari 15.4+ 才支持 env() 在 calc() 中使用，旧版本需降级为固定值。
横竖屏切换或分屏时 env() 值突变，CSS 不会自动重算
iOS 在旋转、分屏多任务、甚至某些键盘弹出场景下，env(safe-area-inset-top) 可能从 44px 突变为 0，但 CSS 不会重新计算 padding 或 scroll-padding。此时仅靠纯 CSS 无法响应。必须监听 resize 事件，用 JS 触发一次强制重绘，例如切换一个无样式的 class：
window.addEventListener('resize', () => document.documentElement.classList.toggle('force-redraw'));
这个细节极容易被忽略——模拟器通常不触发突变，真机测试时才会暴露；iOS 16/17/18 表现不一致，务必分别验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
