app端，平板横屏，uni-app rpx使用的界面，出现显示大小偏小

app端，平板横屏，uni-app rpx使用的界面，出现显示大小偏小

开发环境 版本号 项目创建方式
Mac Apple M2；14.5 CLI

产品分类：uniapp/App

PC开发环境操作系统：Mac

手机系统：Android

手机系统版本号：Android 13

手机厂商：安卓平板/学习机

手机机型：安卓平板

页面类型：vue

vue版本：vue3

打包方式：云端

CLI版本号：4.36

示例代码：

1、pages.json 跟rpx相关配置如下：

{
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "pageOrientation": "auto",
        "rpxCalcMaxDeviceWidth": 1920,
        "rpxCalcBaseDeviceWidth": 375,
        "rpxCalcIncludeWidth": 750
    }
}

2、部分样式如下：

.action-item-icon {
    width: 16rpx;
    height: 18rpx;
}


操作步骤：


偶然打开app出现，后续很难复现，偶尔会出现

预期结果：

rpx使用的地方，渲染正常


实际结果：


有时候，rpx使用的地方，渲染异常，整体显示偏小

bug描述：

1、使用时，横屏界面是正常显示大小； 2、某些情况下出现，横屏界面使用了rpx单位的元素整体缩小了； 3、无法稳定复现，异常和正常效果图如下附件，上边是异常显示，下边正常显示


更多关于app端，平板横屏，uni-app rpx使用的界面，出现显示大小偏小的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

可以先确定下问题是什么，另外，宽屏上 rpx 会有兼容性问题，https://uniapp.dcloud.net.cn/tutorial/adapt.html#_4-内容缩放拉伸的处理

更多关于app端，平板横屏，uni-app rpx使用的界面，出现显示大小偏小的实战教程也可以访问 https://www.itying.com/category-93-b0.html


“globalStyle”: { “pageOrientation”: “auto”, “rpxCalcMaxDeviceWidth”: 1920, “rpxCalcBaseDeviceWidth”: 375, “rpxCalcIncludeWidth”: 750 } 那这个配置1920 最大设备宽度 实际上是会出现兼容性问题？

回复 菜菜2: 这个不能确定吧，你这个是偶现性问题

关于uni-app在Android平板横屏模式下rpx显示异常的问题，这里有几个关键点需要注意：

  1. rpx适配机制：uni-app的rpx是基于750设计稿的响应式单位，在横屏时可能会因设备宽度变化导致计算异常

  2. 您已配置的rpx相关参数基本合理，但可以尝试调整：

"rpxCalcMaxDeviceWidth": 2560,
"rpxCalcBaseDeviceWidth": 750,
"rpxCalcIncludeWidth": 1920
回到顶部