距离您98米

发布：46 分钟前
更新：45 分钟前
阅读：16

【报Bug】APP端 "targetSdkVersion" : 36，所有(三星手机),env(safe-area-inset-bottom)都有问题

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 5.26

手机系统： Android

手机系统版本号： Android 16

手机厂商：三星

手机机型：多台三星手机

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
底部安全区域

操作步骤：

<view class="bottom-bar"> <view v-if="isSkuSoldOut" class="sold-out-banner">{{ t('shop.itemSoldOut') }}</view> <view class="bottom-actions"> <template v-if="isCustom"> <view class="action-btn buy-btn" class="{ disabled: isSkuSoldOut }" @click="onStartDesigning"
>{{ t('shop.startDesigning') }}</view>
</template>
<template v-else>
<view
class="action-btn cart-btn" class="{ disabled: isSkuSoldOut }" @click="onAddCart"
>
<image class="img" src="/static/images/shop/add_cart_icon.png" mode="aspectFill" />
<text>{{ t('shop.addToCart') }}</text>
</view>
<view
class="action-btn buy-btn"

class="{ disabled: isSkuSoldOut }" @click="onBuy"

{{ t('shop.buyNow') }}</view>
</template>
</view>
</view>
.bottom-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: #ffffff;

        .sold-out-banner {  
            height: 60rpx;  
            line-height: 60rpx;  
            box-sizing: border-box;  
            text-align: center;  
            background: #FFF0D2;  
            color: #17233D;  
            font-size: 24rpx;  
            font-weight: 400;  
        }  

        .bottom-actions {  
            margin-top: 0;  
            display: flex;  
            gap: 20rpx;  
            background: #ffffff;  
            padding: 24rpx 32rpx;  
            padding-bottom: calc(24rpx + env(safe-area-inset-bottom));  
            box-sizing: border-box;  

            .action-btn {  
                .img {  
                    width: 36rpx;  
                    height: 36rpx;  
                    display: block;  
                    margin-right: 20rpx;  
                }  

                flex: 1;  
                height: 96rpx;  
                border-radius: 48rpx;  
                display: flex;  
                align-items: center;  
                justify-content: center;  
                font-size: 30rpx;  
                font-weight: 700;  
                box-sizing: border-box;  

                &.cart-btn {  
                    border: 1px solid #48A16B;  
                    color: #48A16B;  
                    background: #fff;  
                }  

                &.buy-btn {  
                    color: #fff;  
                    background: #48A16B;  
                }  

                &.disabled {  
                    opacity: 0.45;  
                    pointer-events: none;  
                }  
            }  
        }  
    }

预期结果：

APP端修复三星手机上的 env(safe-area-inset-bottom),好几个月了，请修复。。。

实际结果：

APP端修复三星手机上的 env(safe-area-inset-bottom)

bug描述：

APP端 "targetSdkVersion" : 36，padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

"targetSdkVersion" : 35没问题

其他手机全部正常

46 分钟前负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

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

收到你的反馈，以下是从官方角度对该 Bug 反馈的评审意见：

一、反馈内容完整性评审

整体来看，这条反馈的分类信息比较完整（HBuilderX 5.26 正式版、Android 16、Vue3、三星多台机型、Windows 11 开发环境），并且给出了 targetSdkVersion 35 与 36 的对比结论，问题定位方向清晰，这是值得肯定的。但仍有以下内容需要补充：

实际结果描述不完整：目前“实际结果”一栏写的是“APP端修复三星手机上的 env(safe-area-inset-bottom)”，这更接近诉求而非现象描述。请补充具体表现，例如：env(safe-area-inset-bottom) 取值是否变成了 0？底部内容是否被系统导航栏/手势条遮挡？还是底部出现黑条？不同现象对应的排查方向不同。
复现步骤不够详细：未说明打包方式（云端打包、自定义基座还是离线打包），也未提供 manifest.json 中 app-plus 下的相关配置（如 safearea 配置）。请补充完整，以便官方按相同条件复现。
代码示例非完整可运行页面：当前只提供了模板片段和样式，缺少 script 中的变量定义（如 isSkuSoldOut、t 函数）及页面配置，官方人员需要自行裁剪搭建才能运行。建议提供一个最小化的完整可运行示例页面。
另外说明：我无法识别附件，如有截图或效果图，请用文字描述具体现象。
建议补充：多台三星机型的具体型号与系统版本列表、是否所有页面均受影响、标准基座与自定义基座表现是否一致。

二、Bug 是否成立的分析

知识库中存在高度相似的社区反馈：【报Bug】google 应用必须以 Android 16（API 级别 36）或更高级别为目标平台，该帖同样是 targetSdkVersion 36 + 三星手机 + 底部安全区异常（描述为 35 正常、36 异常且底部出现黑条），说明该现象并非孤例，你的反馈具有一定可信度。
从历史版本记录看，DCloud 曾修复过类似问题：“配置 targetSdkVersion 为 35 后在安卓15设备页面底部内容可能会被系统按键导航栏盖住的Bug”，见 2025年01月02日发布——HBuilderX（4.44.2024123110）更新日志。这说明 targetSdkVersion 变化确实可能引起底部安全区/导航栏行为变化，此类问题有修复先例。
但目前知识库中尚未检索到针对“targetSdkVersion 36 + 三星机型 + env(safe-area-inset-bottom)”的官方确认结论或修复记录，因此该问题的最终定性仍需官方按你补充后的复现步骤进行验证，暂无法直接确认已定位或已修复。

三、可先行尝试的替代方案

在等待官方跟进期间，可以绕开 env(safe-area-inset-bottom)，改用 API 动态获取安全区高度来计算底部留白：

const sys = uni.getSystemInfoSync()  
const safeArea = sys.safeArea  
const screenH = sys.screenHeight || 0  
const safeBottom = safeArea ? (screenH - safeArea.bottom) : 0  
// 将 safeBottom 存入 data/store，模板中动态绑定：  
// :style="{ paddingBottom: safeBottom + 'px' }"

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

该方案通过 safeArea 与 screenHeight 计算底部安全区高度（部分设备底部手势条会大于 0），不依赖 CSS 的 env() 表现，可作为临时规避手段验证效果。

四、后续建议

请按第一部分补充实际现象描述、打包方式、manifest 相关配置及完整最小示例后，在原帖继续补充材料，官方会持续跟进。同时建议关注 HBuilderX 后续版本的更新日志，确认该问题是否随版本修复。

内容为 AI 生成，仅供参考

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

【报Bug】APP端 "targetSdkVersion" : 36，所有(三星手机),env(safe-area-inset-bottom)都有问题

示例代码：

padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
底部安全区域

预期结果：

APP端修复三星手机上的 env(safe-area-inset-bottom),好几个月了，请修复。。。

实际结果：

APP端修复三星手机上的 env(safe-area-inset-bottom)

bug描述：

1 个回复

公告

相关问题

【报Bug】APP端 "targetSdkVersion" : 36，所有(三星手机),env(safe-area-inset-bottom)都有问题

示例代码： padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); 底部安全区域

预期结果： APP端修复三星手机上的 env(safe-area-inset-bottom),好几个月了，请修复。。。

实际结果： APP端修复三星手机上的 env(safe-area-inset-bottom)

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

示例代码：

padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
底部安全区域

预期结果：

APP端修复三星手机上的 env(safe-area-inset-bottom),好几个月了，请修复。。。

实际结果：

APP端修复三星手机上的 env(safe-area-inset-bottom)