uni-app 在hbuilder底座调试的app与打包后的app首页样式不同

uni-app 在hbuilder底座调试的app与打包后的app首页样式不同

开发环境 版本号 项目创建方式
Mac 10.15.4 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Mac

HBuilderX类型:正式

HBuilderX版本号:3.1.7

手机系统:Android

手机系统版本号:Android 10

手机厂商:华为

手机机型:华为MatePad BAH3-W59

页面类型:vue

打包方式:云端

操作步骤:

按【bug描述】中的,在页面中设置rpx为单位的元素,并按原代码设置横屏,不在pages.json中做横屏配置,会出现以下结果 在hbuilder底座调试的app 与 打包后的app 首页样式不同。

预期结果:

在hbuilder底座调试的app 与 打包后的app 首页样式相同,打包的结果依赖调试是看到的。 rpx的计算时机是什么?按上述方法解决是否正确?

实际结果:

在hbuilder底座调试的app 与 打包后的app 首页样式不同

bug描述:

【问题】 在hbuilder底座调试的app 与 打包后的app 首页样式不同,如图左侧是底座中的app,右侧是打包安装后的app,右侧尺寸明显大于左侧,只有在首页会出现这种情况

【原代码】 在App.vue中设置横屏的代码如下

onLaunch: function () {  
    // #ifdef APP-PLUS  
    plus.screen.lockOrientation('landscape-primary')  
    // #endif  
}

【解决】 在pages.json中做了如下配置

"globalStyle": {  
    "pageOrientation": "landscape"  
}

【猜测原因】 打包后的app,首屏时uni-app根据竖屏计算rpx适配的,导致尺寸与预期不一致,故设置了pages.json中的如上配置


更多关于uni-app 在hbuilder底座调试的app与打包后的app首页样式不同的实战教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部