app端安全区域适配必须原生层（manifest.json设offset:"auto"）与web层（css fallback+js动态取值）协同处理：auto自动占位填色，none需手动补白；二者不可混用，否则导致双倍留白或遮挡。
app端安全区域适配必须分「原生层」和「web层」两路处理，只靠css或只改manifest都容易漏掉关键环节。
manifest.json 的 safearea.bottom.offset 设 auto 还是 none
设 auto 时，UniApp 会在 iOS/Android 原生渲染层底部插入一个占位视图（高度约 34pt），背景色自动继承页面主题色；设 none 则完全不占位，内容直抵屏幕底边——但你得自己用 CSS 或 JS 补齐留白，否则按钮大概率被 Home Indicator 遮住。
- 带原生
tabbar的页面，offset必须设auto：tabbar 本身已预留安全区，auto不会叠加空白，且避免手动计算出错 - 全屏场景（如视频播放页、游戏页）才考虑
none，且必须配合navigationStyle: "custom"使用 - 修改后需重新编译并重启调试基座，HBuilderX 模拟器不生效，必须真机测试
env(safe-area-inset-bottom) 在 App 端是否可靠
不可单独依赖。iOS 原生 WebView（Safari / 微信内置浏览器）支持 env(safe-area-inset-bottom)，但 Android 原生 WebView 大部分不支持，尤其低版本系统；nvue 页面完全不识别该变量。
- 稳妥写法必须包含 fallback：
padding-bottom: 0;padding-bottom: constant(safe-area-inset-bottom);（旧版 iOS 兼容）padding-bottom: env(safe-area-inset-bottom); - 若已在 manifest 中设了
offset: "auto"，再加这组 CSS 会导致底部双倍留白，务必检查是否冗余 - 小程序端完全不识别
env()，此写法仅对 App 和部分 H5 有效
pages.json 中 navigationStyle: "custom" 对安全区的影响
启用 navigationStyle: "custom" 后，顶部安全区由你接管（原生 safearea.top 自动失效），但底部不受影响——manifest 里 safearea.bottom.offset 依然生效。
- 如果 manifest 设了
offset: "auto"，即使用了custom导航栏，底部仍会有原生占位，无需额外 padding - 如果 manifest 设了
offset: "none"，底部就真的“裸奔”，此时必须手动加padding-bottom或动态绑定safeAreaInsets.bottom -
custom模式下，顶部状态栏高度需用uni.getSystemInfoSync().safeAreaInsets.top动态获取并设置，不能只靠 CSS 变量
uni.getSystemInfoSync().safeAreaInsets 的实际用途
这是最兜底、最跨平台的方式，返回值在 App 真机运行时才准确（模拟器/H5 返回 0 是正常现象），适用于所有需要精确控制的场景。
- 在
onLoad或onShow中调用，获取{ top, bottom, left, right } - 可用于动态绑定样式：
:style="{ paddingBottom: safeAreaInsets.bottom + 'px' }" - nvue 页面唯一可用的安全区方案，CSS 环境变量在此无效
- 注意：不同机型
bottom值差异明显（iPhone X 约 34pt，iPhone 14 Pro Max 约 39pt），不能硬编码
最容易被忽略的是：manifest 配置和 CSS 写法之间存在隐式耦合。设了 auto 还加 env() padding，或者设了 none 却忘了手动补高，都会导致视觉或交互异常。真机验证前，先理清这两层谁在管底部留白。
