Regarding uni-app using rpx, fonts and other styles are incompatible on the iPad

On Saturday, I finally made up my mind to submit a stable version of the iOS app to the App Store for review. I received an email this morning and found it was rejected. One of the problems is that the iPad display has a problem that affects the user experience, as shown below. :

I felt a little strange for a while. I obviously used rpx. It was okay on the iPhone and other mobile phones. Why did the fonts become so bloated on the iPad? I checked the uni-app official website and found the following passage: "

The use of rpx needs to be emphasized here.

There are also many screen widths on mobile devices, and designers generally only produce pictures according to the 750px screen width. The advantage of using rpx at this time is that the screen widths of various mobile devices are not very different. Compared with the 750px fine-tuning zoom effect, the designer's design is restored as much as possible.

However, once separated from the mobile device, in the PC screen, or the pad horizontal screen state, because the screen width is much larger than 750. At this time, the result of rpx changes according to the screen width is seriously out of expectation, which is terrible. "

And it is prompted to configure the following parameters of rpx in the globeStyle of pages.json:

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

But you will find that after adding it, it will not work, and then it will work after setting rpxCalcMaxDeviceWidth to 0.

Of course, the uni-app official website also explains: “Through the first two of the above configurations, rpxCalcMaxDeviceWidth and rpxCalcBaseDeviceWidth, you can effectively solve the problem that the interface becomes extremely large under widescreen after using rpx. If you don’t need it If you specifically define the values ​​of these two parameters, you don’t need to configure them in pages.json, just keep the default values ​​of 960 and 375."

Specifically, it is necessary to adapt the screen width by adjusting the values ​​of rpxCalcMaxDeviceWidth and rpxCalcBaseDeviceWidth according to the actual situation.

Original link: https://www.xubingtao.cn?p=2650

Follow my public account to release all kinds of useful information for you every day.