必须添加viewport-fit=cover才能启用env(safe-area-inset-top)，否则背景色被状态栏遮挡；需用min-height:100vh加padding-top:env(safe-area-inset-top)确保容器撑高，theme-color与background-color互不影响。
移动端状态栏遮挡背景色，先看 viewport-fit 是否生效
viewport-fit=cover 是 iOS Safari（及部分 Android 浏览器）识别安全区域的关键开关。没加它，env(safe-area-inset-top) 就是无效变量，CSS 里写的 padding 或 margin 补白根本不会触发——结果就是背景色被状态栏硬生生切掉顶部一截，尤其在 iPhone X 及更新机型上特别明显。
必须在 <meta name="viewport"> 中显式声明：content="width=device-width, initial-scale=1.0, viewport-fit=cover"。漏掉 viewport-fit=cover，哪怕写了 padding-top: env(safe-area-inset-top)，浏览器也当普通字符串处理，不解析、不计算、不应用。
background-color 被裁剪，不是颜色没设对，而是容器没“撑高”
即使 viewport-fit 正确，背景色仍只显示到状态栏下方，大概率是容器高度没覆盖安全区顶部。常见错误包括：
- 父容器用了
height: 100vh—— 这个值在 iOS Safari 中不包含状态栏高度，实际可视高度 ≈100vh - env(safe-area-inset-top)，导致底部有空白，顶部又被遮；应改用min-height: 100vh+padding-top: env(safe-area-inset-top) - Flex 容器设了
align-items: center或flex-start，子元素没拉伸，容器自身高度塌陷；需确保align-items: stretch（默认值）未被覆盖，且父级有明确高度来源（如min-height: 100vh） - 使用了
position: fixed或absolute的全屏背景层，但没加top: 0; left: 0; width: 100%; height: 100%，导致它只渲染在视口内，不延伸至安全区
Android 和 iOS 对 theme-color + background-color 的响应逻辑完全不同
theme-color 元标签只影响 Android Chrome/PWA 状态栏底色，iOS Safari 完全无视；而页面自身的 background-color 在 iOS 上是否“顶到最顶”，取决于你有没有用 env(safe-area-inset-top) 主动腾出空间。两者不联动、不继承、不 fallback。
所以别指望改了 theme-color 就能让页面背景自动上移——那是两件事：前者管系统栏，后者管你的 DOM 渲染区域。iOS 下想让背景色真正“全屏”，必须手动适配安全区，否则状态栏永远压在内容上方，视觉上就是“显示不全”。
调试时最容易忽略的三个点
真机调试常卡在这几个细节上：
- Chrome DevTools 的模拟器默认不启用
viewport-fit=cover，即使写了也不会触发env()变量；必须用真机 + Safari Web Inspector 或 Chrome on iOS（需开启开发者模式）验证 -
env(safe-area-inset-top)在非刘海屏设备（如 iPad mini 2）返回 0，但某些旧版 iOS 会返回 undefined，导致整个声明失效；建议加降级：padding-top: max( env(safe-area-inset-top), 20px ) - 如果用了 CSS 变量存
env()值（如--safe-top: env(safe-area-inset-top)），注意变量不能在 :root 外直接计算，且必须在声明后才可被引用，顺序错就白写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
