一、问题背景

在 iPhone X 及之后的全面屏机型中，苹果引入了 Safe Area 的概念。屏幕底部有一条高度约为 34pt 的 Home Indicator 区域。程序会要求应用内容不得侵入该区域，以避免与程序手势产生冲突。

在 uni-app 开发中，许多开发者会遇到以下场景：

• 从普通列表页跳转到一个全屏播放页 / 画布页 / 游戏页希望底部安全区域的白色/黑色占位消失；话说回来，
• 页面跳转后底部安全区与目标页面的背景色不一致。出现视觉割裂；
• 使用 uni.navigateTo 跳转后新页面的底部安全区无法动态控制。

主要矛盾在于：uni-app 的安全区域配置是应用级别的，而非页面级别的。你无法在 uni.navigateTo 的参数中传入一个 hideSafeArea:true 来动态控制。

二、iOS 安全区域的底层机制

什么是 Safe Area

自 iOS 起，UIView 新增了safeAreaInsets属性。UIViewController 新增了safeAreaLayoutGuide. 在全面屏设备上：

区域	高度	说明
顶部 ~ 59 Status Bar + Notch/Dynamic Island	59 pt	顶部安全区
底部34 上滑手势区域	34 pt	底部安全区
左右47	47 pt	横屏两侧圆弧遮挡

uni-app 在 iOS 上的渲染架构

# Vue/React 页面 ↓ uni-app 编译层 ↓ iOS 原生容器 ↓ UIViewController → UIView

• - 普通 vue 页面：WebView 的 frame 会被原生层向上/向下缩进，安全区由原生背景色填充。
• - nvue 页面：自渲染引擎直接处理 safe area insets。
• - 无论哪种渲染模式，都无法在页面 JS 生命周期中动态修改原生安全区配置。

为什么不能“跳转时去掉”?

1. - 所有页面共享同一个原生容器配置；
2. - 页面跳转 是容器内部的 WebView 切换，不会重新初始化原生安全区参数；不过，
3. - uni-app 框架层未暴露任何 API允许运行时修改安全区。

三、方法总览

方案 B 保留占位但统一背景色 常规业务大多数情况即可满足需求 是 仅需改动 manifest.json 并重打包一次即可长期有效低 方案 C CSS 层面视觉融合。仅针对特定页面或不想重打包时使用 否 不需要重新打包，但只能做视觉覆盖并不能真正去除物理占位中

方案名称	适用场景描述	是否需要重新打包？	侵入性
方案 A 全局关闭所有底部 Safe Area 占位 适合沉浸式游戏/视频等无 UI 底栏需求场景 优先级 ★★★★★ 是 必需重打包或自定义基座才能生效 高

四、方案 A：全局关闭底部 Safe Area 占位

1️⃣ 配置方法 – 修改 manifest.json :

{
"app-plus": {
"safearea": {
"bottom": {
"offset": "none" /* none 表示不留空白 */
}
}
}
}

offset 可选值: - auto : 默认值，自动留出 Safe Area 高度 - none : 不留出 Safe Area，高度为0

⚙️ 生效条件 & 打包流程:

。

---