必须添加 viewport-fit=cover，否则 iOS Safari 中 env(safe-area-inset-*) 不生效；需在 meta 标签中声明，并配合 fallback 值（如 pt-4）确保兼容性。
必须加 viewport-fit=cover，否则 env(safe-area-inset-*) 在 iOS 上完全不生效。
viewport-fit=cover 是硬性前提
很多开发者试了 env(safe-area-inset-top) 没反应，根本原因是漏掉了 viewport 配置。iOS Safari 只有在 viewport-fit=cover 启用后，才会注入 safe-area-inset-* 环境变量。
-
必须写进 - 仅加
width=device-width不够；viewport-fit=cover缺失时，env()返回 undefined，计算结果为 0 - Android Chrome 从 v89+ 开始支持该特性，但行为更宽松——即使没设
viewport-fit，部分机型也可能返回值（不可依赖）
用 padding + env() 处理顶部/底部留白
安全区域偏移量是动态的（比如横屏时刘海可能变侧边），不能写死 px 值。直接用 env() 替代固定 padding 是最稳妥的方式。
- 顶部适配：
class="pt-[env(safe-area-inset-top)] pt-4"—— 先声明env值，再 fallback 到pt-4（Tailwind 默认 1rem） - 底部适配：
class="pb-[env(safe-area-inset-bottom)] pb-4" - 注意：不要只写
pt-[env(...)]，因为旧浏览器或未启用viewport-fit时会解析失败，导致样式丢失 - 如果项目已用
padding-top: env(safe-area-inset-top)，记得在 CSS 中补上padding-top: 1rem作为降级
结合 Tailwind 断点控制安全区域行为
安全区域只存在于某些移动设备（如 iPhone X+、带挖孔/水滴屏的 Android），桌面端不需要。可以用断点类避免在非必要场景注入冗余样式。
- 只在移动端应用安全区 padding：
class="sm:pt-4 md:pt-6 pt-[env(safe-area-inset-top)]" - Home Indicator 底部留白通常只在竖屏全屏 Web App 中需要，可配合
min-h-screen和pb-[env(safe-area-inset-bottom)]使用 - 若页面有固定底部导航栏（如 tab bar），建议用
pb-[env(safe-area-inset-bottom)]而非mb-[...]，避免 margin 被折叠
真正容易被忽略的是 fallback 逻辑和 viewport 配置的耦合性——env() 不是“开了就能用”的 CSS 变量，它高度依赖渲染上下文。哪怕只漏掉一个 viewport-fit=cover，整个安全区适配就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
