必须使用 pb-6 pb-safe 两行写法并配 fallback，因 pb-4 固定 16px 不足以覆盖 iphone 各机型 34–54px 安全区，且 env() 仅 ios safari/chrome 支持，android 及微信 webview 会忽略而回退至 fallback。
直接用 env(safe-area-inset-bottom) 配合 pb- 类，但必须写 fallback，否则真机上按钮会被 Home Indicator 遮住。
为什么 pb-4 在 iPhone 上不管用
因为 pb-4 固定是 1rem（16px），而 iPhone X/XS/12/14/15 系列的安全区高度各不相同：XS 是 34px，12 是 47px，14 Pro 是 54px。硬写 pb-4 根本不够，用户点不到底部按钮。
- 只靠 Tailwind 默认间距无法适配动态安全区
-
env()不是 CSS 自定义变量，不能用calc()混合或缩放 - 桌面 Chrome 模拟器里
env()总是返回 0，测不出问题
怎么正确写安全区底部内边距
必须逐边声明 + fallback，且只作用于需要交互的容器（如底部导航栏、固定操作按钮），不要加在 body 上。
- 写法必须是两行：
pb-6（fallback）然后换行再写pb-safe（Tailwind 的快捷类）或手动写padding-bottom: env(safe-area-inset-bottom) - Tailwind v3.3+ 内置了
pb-safe、pt-safe等类，本质就是padding-bottom: env(safe-area-inset-bottom)，但依然要配 fallback - 推荐写法：
pb-6 pb-safe—— 小屏 fallback 用 6，支持设备自动升为安全区值 - 别写
mb-safe：margin 不会触发安全区计算，且可能破坏 flex/sticky 布局流
Android 和微信 WebView 能用吗
基本不能。env() 安全区变量目前仅 iOS 11.2+ / Safari 11.0+ / Chrome for iOS 支持；Android WebView、微信内置浏览器、QQ 浏览器均不识别 env(safe-area-inset-*)，会直接忽略该声明，退回到 fallback 值。
- 这意味着你在微信里看到的“底部黑条”不是安全区问题，而是内容溢出或定位错误
- 别在
tailwind.config.js里给env()加自定义 theme —— 它不是 Tailwind 可配置的 token - 如果项目需多端兼容，建议用 JS 检测
safeAreaInsets并动态加 class，而不是强依赖 CSS env
真正容易被忽略的是：安全区适配不是“全局加 padding”，而是精准控制交互热区；写错一行 fallback，整块底部操作就失效——尤其当设计稿没标安全区数值时，得靠真机连 devtools 实时看 computed 值来校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
