顶部留白问题源于 viewport-fit=cover 未生效或 env(safe-area-inset-top) 不被识别；必须显式声明 viewport-fit=cover 并双写 constant()/env() 且用 @supports 包裹，缺一不可。
顶部留白不是 CSS 写多了，而是 viewport-fit=cover 没生效，或 env(safe-area-inset-top) 根本没被浏览器识别。
viewport-fit=cover 必须显式声明且不可被覆盖
很多页面在 iPhone 14 Pro 上顶部多出一截空白，或 header 被“灵动岛”吃掉，第一排查点就是 <meta name="viewport"> 标签。缺失 viewport-fit=cover，env(safe-area-inset-top) 永远返回 0px——不是值小，是压根不计算。
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 不能混用已废弃的
target-densitydpi，它会让整个viewport解析失败，viewport-fit被静默忽略 - 如果禁用了用户缩放（
user-scalable=no），必须同时加maximum-scale=1.0，否则某些 WebView（如旧版微信）会降级为auto - 微信小程序内 H5 在 8.0.33+ 才稳定支持；支付宝 WebView 至今不识别该值，需 JS fallback
env() 和 constant() 必须双写、顺序固定、且用 @supports 包裹
env(safe-area-inset-top) 在 iOS 11.2+ 生效，但 11.0–11.1 只认 constant(safe-area-inset-top)；不双写 + 不检测，老设备上整条样式直接消失，不是回退到 0，而是“没这条规则”。
- 必须按这个顺序写两遍：
padding-top: constant(safe-area-inset-top, 0px); padding-top: env(safe-area-inset-top, 0px); -
@supports检测只能写成：@supports (padding-top: env(safe-area-inset-top))，不能写@supports (env(...))（语法错误） - fallback 值别设
0，建议用20px或预估的状态栏高度，否则无支持时 header 会塌陷 - 不要把
env()放进calc()里算全高，比如height: calc(100vh - env(safe-area-inset-top))，滚动时100vh动态变化，顶部会跳
fixed 元素被遮挡？改 top，不是 padding-top
顶部导航栏用了 position: fixed; top: 0，结果被灵动岛盖住？这时加 padding-top 没用——内容区域是往下撑了，但 fixed 元素仍钉在视口最顶上。真正要动的是它的定位基准。
立即学习“前端免费学习笔记（深入）”；
- 对 fixed header 应该设：
top: constant(safe-area-inset-top, 0px); top: env(safe-area-inset-top, 0px); top: 0; - 注意顺序：
top: 0放最后，确保不支持时能自然回退 - 如果 header 有背景色，记得在
@supports块外先设默认top: 0，避免 env() 为 0 时意外留白 - React/Vue 的 inline style（如
style={{ top: 'env(safe-area-inset-top)' }}）完全无效，env()只在 CSS 文件或<style>标签中解析
真正容易被忽略的，是 viewport-fit=cover 和 @supports 的组合刚性——缺一不可。少了前者，安全区变量全为 0；少了后者，iOS 11.1 下连 fallback 都失效。这两者不是“可选增强”，而是异形屏适配的启动开关和保险丝。
