关于uni-app使用rpx出现字体等样式在iPad上不兼容问题
周六终于下决心把早已开发出稳定版本的分享录iOS版APP提交App Store审核了,今天早上收到邮件发现被拒绝回来了,其中有个问题就是在iPad显示有问题影响用户体验,如下图:一时感觉有点奇怪,我明明是使用rpx,在iPhone等手机上看是没问题,为什么在iPad上字体会变得这么臃肿,到uni-app官网查一下,发现有下面这样一段话:“这里需要对rpx的使用特别强调一下。在移动设备上也有很多屏幕
周六终于下决心把早已开发出稳定版本的分享录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
关注我的公众号每天为你发布各类有用信息。
更多推荐
所有评论(0)