关于uni-app使用rpx出现字体等样式在iPad上不兼容问题

周六终于下决心把早已开发出稳定版本的分享录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

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