manifest.json 配置 safearea 是 ios 端最稳方案,需协同设置 background 和 bottom.offset;启用 navigationstyle: "custom" 不影响底部 safearea;css 中 env(safe-area-inset-bottom) 必须带 fallback;u-safe-bottom 仅 app 有效且忌与 offset: "auto" 共用。

manifest.json 配置 safearea 是最稳起点
直接改 manifest.json 是 iOS 端最可靠、最低侵入的方案,不需要写一行 JS 逻辑,也不依赖运行时判断。只要配置生效,原生层就会自动处理占位和背景填充。
关键点在于 app-plus.safearea 下两个字段必须协同设置:
-
background:填你 App 主色调,比如深色主题用"#1A1A1A",浅色用"#F8F8F8";别留默认"#FFFFFF",否则 iPhone 上必出白条 -
bottom.offset:绝大多数页面选"auto",它会让内容自动上移,同时用background色填满底部空白区
改完必须重新执行 npm run dev 或点击 HBuilderX 的“运行到手机或模拟器”,热更新不触发 manifest 重载。
navigationStyle: "custom" 对底部安全区没影响
启用 navigationStyle: "custom" 后,UniApp 会关闭原生导航栏,同时自动禁用 manifest.json 中的 safearea.top 配置——顶部安全区得自己补。
但底部不受影响。即使设置了 navigationStyle: "custom",manifest 里的 safearea.bottom.offset 依然生效。这意味着:
- 如果
offset设为"auto",底部仍会有原生占位,你无需再加padding-bottom - 如果
offset设为"none",则需手动用 CSS 或组件处理底部留白
env(safe-area-inset-bottom) 必须带 fallback
CSS 中用 env(safe-area-inset-bottom) 时,不能裸写,否则在不支持的环境(如旧版 iOS Safari、H5、小程序)会失效甚至崩溃。
正确写法必须带降级:
.safe-bottom {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
注意:constant() 是旧版 iOS Safari 兼容写法,已废弃但仍有存量设备依赖,保留无害;env() 才是标准写法。
u-safe-bottom 组件只在 APP 端生效且慎用
u-safe-bottom 是 uView 提供的组件,仅在 APP 端生效,内部会自动注入 env(safe-area-inset-bottom) 对应的 padding。
但它有个关键限制:不能和 manifest.json 中 safearea.bottom.offset: "auto" 同时使用,否则会导致底部出现双倍空白。
所以实际使用场景很窄:
- 仅当
manifest中设了offset: "none"时才考虑引入 - 若用了
u-safe-bottom,就别在同页面再手动加padding-bottom: env(...) - 它对 H5 和小程序无效,那些端仍得靠 CSS fallback 方案
真正容易被忽略的是:不同机型的 safe-area-inset-bottom 值并不固定,iPhone 12/14/15 Pro Max 和普通版差异可达 4px;横屏时该值可能变为 0,而 manifest 的 "auto" 却仍会占位——这种动态行为必须真机验证,模拟器常不准。











