直接将 manifest.json 中 app-plus.safearea.bottom.offset 设为 "none" 即可解决 App 端底部白条问题，该配置仅影响原生 App，不影响 H5 和小程序。
直接关掉 safearea.bottom.offset 就行
uni-app 的 App 端（iOS/Android 原生打包）默认会为底部安全区域自动留白，这个行为由 manifest.json 里的 safearea.bottom.offset 控制。它的默认值是 "none"，但很多项目里被手动改成 "auto" 或者没注意被模板带入，结果导致底部多出一块空白（常表现为白条或色块）。只要把它设回 "none"，底层就不会再插入占位、也不会强制 padding，问题就解了一大半。
操作路径：manifest.json → 找到 app-plus 节点 → 补全或修改为：
"app-plus": {
"safearea": {
"bottom": {
"offset": "none"
}
}
}
注意：这个配置仅对 App 端生效，H5 和小程序完全忽略它，所以不会影响其他平台。
别让 pages.json 的 safeArea 配置和 CSS 冲突
pages.json 里也有个 safeArea.bottom.offset: "auto" 字段，但它和 manifest.json 的作用机制不同——它会在页面底部**额外插入一个空 <view>**，高度等于安全区距离。如果你同时在 CSS 里写了 padding-bottom: env(safe-area-inset-bottom)，就会出现「双倍留白」，按钮被顶高一截，真机上特别明显。
稳妥做法是：
- 删掉
pages.json中所有safeArea相关字段（尤其是bottom.offset） - 如果必须动态控制（比如横竖屏切换时要重算），那就只用 JS +
uni.getSystemInfoSync().safeAreaInsets.bottom，CSS 里不写env() - 如果只是静态页面，压根不用碰 JS，纯靠
manifest.json关闭即可
安卓白边不是安全区，是背景色没撑满
很多人以为安卓底部白边也是安全区问题，其实不是。安卓没有 env(safe-area-inset-bottom) 这套机制，它的“白边”几乎全是页面背景色没覆盖到底部导致的——尤其是用了自定义导航栏或隐藏了 tabbar 后，page 元素本身背景色是默认白色，而内容容器又没设满高。
解决方法很简单：
- 在
App.vue或页面样式中给page加上background-color，颜色要和你的主内容一致 - 确保内容容器（如
.main-content）用了height: 100%或flex: 1，避免内部留空 - 不要依赖
constant()或env()处理安卓，它们在安卓上返回0或无效值
真机测试前必须关模拟器幻想
几乎所有安全区相关问题，在 HBuilderX 自带模拟器或 Chrome 模拟 iPhone X 都无法准确复现。iOS 的 env(safe-area-inset-bottom) 在 H5 下是 undefined，安卓模拟器根本不读取 safearea 配置，而微信开发者工具对安全区的支持又和真机有差异。
真正有效的验证方式只有：
- iOS 真机（iPhone X 及以上，尤其推荐 XR / 11 / 12 Pro）
- Android 全面屏真机（如小米、华为、三星的主流机型）
- 打包成
app-plus类型后安装测试，别信“运行到浏览器”
最常被忽略的一点：横屏状态下，safe-area-inset-bottom 在灵动岛机型（如 iPhone 14 Pro）上是 0，竖屏才生效。如果你的页面支持横竖屏切换，硬编码 padding-bottom: env(safe-area-inset-bottom) 会导致横屏时底部塌陷——这种细节，模拟器永远测不出来。
