必须加 viewport-fit=cover，否则 env(safe-area-inset-*) 在 iOS Safari 中完全不生效；它是硬性前提，缺则所有安全区变量返回 0px 或解析失败，导致 padding 等样式失效。
必须加 viewport-fit=cover，否则 env(safe-area-inset-*) 在 iOS Safari 中完全不生效。 这不是可选项，是硬性前提。漏掉它，所有后续样式都会 fallback 到 0 或解析失败。
为什么 env(safe-area-inset-top) 没反应？
根本原因几乎全是 缺失 viewport-fit=cover。iOS Safari 只有在该声明启用后，才注入 safe-area-inset-* 环境变量；否则 env() 返回 undefined，CSS 计算中断，padding 直接失效。
-
—— ❌ 不够 -
—— ✅ 必须 - Android Chrome 从 v89+ 起部分机型可能返回值（即使没设
viewport-fit），但不可依赖
如何写兼容 fallback 的 Tailwind class？
不能只写 pt-[env(safe-area-inset-top)]。旧浏览器、未启用 viewport-fit 的场景下，该语法会解析失败，导致整个 padding 声明被丢弃。
- 顶部安全区：
pt-[env(safe-area-inset-top)] pt-4（先 env，再 fallback 到pt-4，即 1rem） - 底部安全区：
pb-[env(safe-area-inset-bottom)] pb-4 - 若需叠加额外留白（如导航栏高度），用
pt-[calc(1rem+env(safe-area-inset-top))]—— 注意括号必须转义为[...]才能被 Tailwind 解析 - 不推荐在项目中全局用
env()替代所有pt-*，应仅在明确需要适配刘海/小黑条的组件上使用
要不要兼容 iOS 11.2 以下的 constant()？
绝大多数项目可以跳过。iOS 11.2 发布于 2018 年初，当前（2026 年）存量设备占比极低；constant() 是私有前缀，现代 WebKit 已废弃，且 Tailwind 不支持直接解析 constant() 函数（需手写 CSS）。
- 如需强兼容老 WebView（如某些内嵌 H5 容器），应在
标签中补充： .safe-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }- Tailwind 本身不处理
constant()，所以无法用pt-[constant(...)]这类写法 - 真机调试时，在 Safari 开发者工具的 Computed 面板里查
padding-top实际值，确认是否命中了env()分支
安全区域值是动态的，别写死 px
env(safe-area-inset-bottom) 在横屏时可能变成 safe-area-inset-left 或 right，且不同机型数值差异大（iPhone X 底部约 34px，iPhone 15 Pro Max 约 42px）。硬编码 pb-8 或 pb-10 无法覆盖所有情况。
- 优先用
pb-[env(safe-area-inset-bottom)] pb-4，让浏览器实时读取 - 若页面含固定底栏（如 tab bar），建议用
pb-[env(safe-area-inset-bottom)]而非mb-*，避免 margin 折叠问题 - 配合断点控制：如
sm:pb-4 md:pb-6 pb-[env(safe-area-inset-bottom)]，避免桌面端无意义地注入 env 计算
最易被忽略的一点：安全区域适配不是“加个 class 就完事”，而是 viewport 声明、CSS 解析顺序、fallback 机制、设备上下文四者共同作用的结果。哪怕只漏掉 viewport-fit=cover，整个方案就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
