周六终于下决心把早已开发出稳定版本的分享录iOS版APP提交App Store审核了,今天早上收到邮件发现被拒绝回来了,其中有个问题就是在iPad显示有问题影响用户体验,如下图:

一时感觉有点奇怪,我明明是使用rpx,在iPhone等手机上看是没问题,为什么在iPad上字体会变得这么臃肿,到uni-app官网查一下,发现有下面这样一段话:“

这里需要对rpx的使用特别强调一下。

在移动设备上也有很多屏幕宽度,设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于,各种移动设备的屏幕宽度差异不是很大,相对于750px微调缩放后的效果,尽可能的还原了设计师的设计。

但是,一旦脱离移动设备,在pc屏幕,或者pad横屏状态下,因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期,大的惨不忍睹。”

并且提示在 pages.json 的 globeStyle 里配置 rpx 的如下参数:

{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960
    "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375
    "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750
  },
}

但是你会发现加了以后然并卵,后来把rpxCalcMaxDeviceWidth设为0后竟然可以了。

当然uni-app官网,后面也有说明:“通过上述配置中的前2个,即rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth,即可有效解决使用了rpx后,在宽屏下界面变的奇大无比的问题。如果你不需要特别定义这2个参数的数值,则无需在pages.json中配置它们,保持默认的960和375即可。”

具体还是要根据实际情况通过调整rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth的值来适配屏幕宽度。

原文链接:https://www.xubingtao.cn?p=2650

关注我的公众号每天为你发布各类有用信息。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐