1***@qq.com

发布：2026-02-09 11:28
更新：2026-02-09 11:29
阅读：30

【报Bug】app在华为pad上，底部安全距离无法去除

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows10

HBuilderX类型：正式

HBuilderX版本号： 4.87

手机系统： Android

手机系统版本号： Android 14

手机厂商：华为

手机机型： matePad 11.5

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

给页面上设置宽高100%，添加一个背景色，底部区域会有一部分空白

<template>  
    <view class='page'></view>  
</template>  

<style>  
  .page {  
    width: 100vw;  
    height: 100vh;  
    background: red;  
  }  
</style>

预期结果：

去除底部空白区域

实际结果：

底部存在空白区域

bug描述：

app运行到华为pad端之后，底部会有一个安全距离的区域，页面内容无法渲染上去，在manifest.json的app-plus=》safearea=》bottom=》offset中设置了none，也不管用

// manifest.json（片段）    
"app-plus": {    
 "safearea": {    
   "bottom": { "offset": "none" }    
 }    
}

2026-02-09 11:28 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

【评审结论】
该反馈信息基本完整，但缺少可直接复现的代码片段，导致官方难以 100 % 还原现场；同时“offset:none”在 Android 端的表现与 iOS 并不完全一致，需要进一步确认华为 Pad 的系统实现。综合来看，可判定为有效但需补充的 Bug。

1. 信息完整度检查

检查项	状态	说明
BUG 描述	✅	已说明“底部安全距离无法去除”
代码示例	❌	仅文字描述“宽高 100 %、背景色”，无可直接运行的最小代码片段
复现步骤	⚠️	步骤简单，但缺少 manifest.json 对应段落、页面样式代码
预期/实际结果	✅	描述清晰
分类信息	✅	版本、平台、机型均给出

需要补充的内容

manifest.json 中 app-plus → safearea 的完整配置（脱敏后）
出现问题的页面 <template> 与 <style> 最小代码
是否使用了 tabBar、是否使用了沉浸式导航栏等上下文信息

2. Bug 是否成立

根据知识库：

[优先知识库] 已明确“Android 上去掉底部安全区域需在 manifest.json 的 app-plus.safearea.bottom.offset 设为 none”。
[结构化文档- darkmode 适配指南] 指出该配置需 云端打包 且 Android 10+ 才生效；华为 MatePad 11.5（Android 14）满足系统要求，但必须确认是云打包而非自定义基座或离线打包。
若仍无效，可能是华为 Pad 的系统手势条强制占位，属于系统级安全区域，不能完全去除，只能改变背景色或让内容延伸到该区域（offset:none 仅去掉占位，不保证内容不被遮挡）。

3. 下一步建议（基于知识库）

确认打包方式：必须使用 DCloud 云端打包 且为正式签名包，自定义基座/离线包不会生效。

补充最小复现 demo：

// manifest.json（片段）  
"app-plus": {  
 "safearea": {  
   "bottom": { "offset": "none" }  
 }  
}

/* 页面样式 */  
page { height: 100%; background: #f00; }

若仍出现空白，可使用 uni.getSystemInfoSync().safeArea 打印安全区域坐标，确认是系统手势条还是应用留白。
如必须让内容完全贴底，可尝试：
- 设置 "safearea": { "background":"#f00" } 使空白区颜色与页面一致；
- 在页面根元素加 padding-bottom: 0 !important; margin-bottom: 0; 并监听 safeAreaInsets.bottom 做动态补偿。

4. 结论

当前反馈可认定为 有效问题，但需用户补充最小代码与打包方式截图，以便官方进一步定位。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

【报Bug】app在华为pad上，底部安全距离无法去除

操作步骤：

给页面上设置宽高100%，添加一个背景色，底部区域会有一部分空白

`<template> <view class='page'></view> </template> <style> .page { width: 100vw; height: 100vh; background: red; } </style>`

预期结果：

去除底部空白区域

实际结果：

底部存在空白区域

bug描述：

1 个回复

1. 信息完整度检查

2. Bug 是否成立

3. 下一步建议（基于知识库）

4. 结论

公告

相关问题

【报Bug】app在华为pad上，底部安全距离无法去除

操作步骤： 给页面上设置宽高100%，添加一个背景色，底部区域会有一部分空白 <template> <view class='page'></view> </template> <style> .page { width: 100vw; height: 100vh; background: red; } </style>

预期结果： 去除底部空白区域

实际结果： 底部存在空白区域

bug描述：

与内容相关的链接

1 个回复

1. 信息完整度检查

2. Bug 是否成立

3. 下一步建议（基于知识库）

4. 结论

公告

相关问题

操作步骤：

给页面上设置宽高100%，添加一个背景色，底部区域会有一部分空白

`<template> <view class='page'></view> </template> <style> .page { width: 100vw; height: 100vh; background: red; } </style>`

预期结果：

去除底部空白区域

实际结果：

底部存在空白区域