6***@qq.com
6***@qq.com
  • 发布:2026-07-31 10:58
  • 更新:2026-07-31 10:59
  • 阅读:26

【报Bug】小米15pro页面底部全部会有留白,在其他安卓机型没有这种情况

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 26.2

HBuilderX类型: 正式

HBuilderX版本号: 5.15

手机系统: Android

手机系统版本号: Android 15

手机厂商: 小米

手机机型: 小米15pro

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://m.malink.cn/s/UvUJbi

示例代码:

app-plus配置如下,targetSdkVersion为35:

"app-plus" : {    
        "usingComponents" : true,    
        "nvueStyleCompiler" : "uni-app",    
        "compilerVersion" : 3,    
        "safearea" : {    
            "background" : "#fff7ed",    
            "bottom" : {    
                "offset" : "none"    
            }    
        },    
        "distribute" : {    
            "android" : {    
                "packagename" : "...",    
                "permissions" : [...],    
                "abiFilters" : [ "arm64-v8a" ],    
                "targetSdkVersion" : 35  
            }         
        }    
    }

首页相关代码,页面也都使用了env(safe-area-inset-bottom) 来处理安全区:

<view class="content">    
        <image class="logo" src="/static/logo.png"></image>    
        <view class="text-area">    
            <text class="title">{{title}}</text>    
        </view>    
    </view>    
</template>    

<script>    
    export default {    
        data() {    
            return {    
                title: 'Hello'    
            }    
        },    
        onLoad() {    

        },    
        methods: {    

        }    
    }    
</script>    

<style>    
    .content {    
        height: 100%;    
        display: flex;    
        flex-direction: column;    
        align-items: center;    
        justify-content: center;    
        background-color: aquamarine;    
        box-sizing: border-box;    
        padding-bottom: constant(safe-area-inset-bottom);    
        padding-bottom: env(safe-area-inset-bottom);    
    }    

    .logo {    
        height: 200rpx;    
        width: 200rpx;    
        margin-top: 200rpx;    
        margin-left: auto;    
        margin-right: auto;    
        margin-bottom: 50rpx;    
    }    

    .text-area {    
        display: flex;    
        justify-content: center;    
    }    

    .title {    
        font-size: 36rpx;    
        color: #8f8f94;    
    }    
</style>

操作步骤:

进入demo的app首页

预期结果:

底部无留白

实际结果:

底部有留白

bug描述:

小米15pro页面进去底部会有留白,在附件中已提供图片和最小demo示例,小米15pro进去首页就会有这个情况

2026-07-31 10:58 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

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

感谢您的反馈。针对您提交的关于“小米15pro页面底部全部会有留白”的 Bug 反馈,官方评审意见如下:

1. Bug 反馈内容完整性评审

  • BUG 描述:描述较为清晰,指明了特定机型(小米15 Pro)、系统版本(Android 15)以及具体现象(页面底部留白),并提供了 manifest.json 中的相关配置片段。但建议补充说明该现象是仅在使用系统手势导航时出现,还是在使用经典三键导航时也会出现。
  • 代码示例:代码示例基本完整,包含了页面结构、样式和配置。但代码中使用了本地静态图片资源(/static/logo.png),官方在复现时可能需要替换为项目自带图片或提供完整的 demo 附件。您已在描述中提到附件提供了最小 demo,这点很好。
  • 复现步骤:复现步骤描述为“进入demo的app首页”,结合提供的代码示例可以顺利复现,步骤清晰。
  • 预期结果与实际结果:预期结果(底部无留白)合理;实际结果(底部有留白)符合现象描述。
  • 分类信息:分类信息完整,包含了 PC 环境、HBuilderX 版本、手机系统及机型、Vue 版本等必要信息。

2. Bug 是否成立分析

根据知识库中的官方发版说明,该 Bug 现象属于已知问题,且官方已修复并发布

Android 离线 SDK 4.44.2024123110 版本(Alpha 版对应 4.41.2024121203-alpha)的更新日志中明确指出:

“修复 配置 targetSdkVersion 为 35 后在安卓15设备页面底部内容可能会被系统按键导航栏盖住的Bug”

由于您的项目中配置了 "targetSdkVersion": 35,且运行在 Android 15 设备上,正好命中了该已知问题。该问题已在 HBuilderX 4.44 及以上版本中修复。

3. 解决建议

您当前使用的 HBuilderX 正式版版本号为 5.15,已包含该问题的修复。建议您按以下步骤进行处理:

  1. 重新打包:请删除手机上安装的旧版应用,在 HBuilderX 中重新打包(自定义基座或正式包)并安装运行,检查底部留白问题是否已经消失。
  2. 配置自查:根据您提供的代码,manifest.json 中已配置 "safearea": { "bottom": { "offset": "none" } },并在 CSS 中使用了 env(safe-area-inset-bottom)。该组合方案在最新版中可以正常生效。如果重新打包后仍有问题,请检查应用是否确实使用了最新版本的基座/包。

综上,该 Bug 在当前版本中已修复,属于历史已解决问题。如果在升级打包后依然存在,请提供新版打包日志或补充复现 demo 以便进一步排查。

内容为 AI 生成,仅供参考

要回复问题请先登录注册