uni-app开发的平板在不同尺寸下适配问题处理方法

平板因其设备的便捷性和设备尺寸优势,在如今的日常生活中经常被使用。因而在众多设备产品中,平板的适配也逐渐成为了重要选择条件。

本篇文章就来介绍在uni-app中如何处理不同平板之间的适配性问题。

常见的平板分辨率从960至1920不等,落差悬殊的尺寸比例也就意味着在不同的尺寸在我们要如何做好适配问题。

在uni-app框架中提供了rpx机制,如此我们可以如何合理使用rpx和uni-app提供的机制使不同尺寸下避免造成页面排版混乱。


如图所示,在1280*720尺寸的平板中排版正常。但960*540尺寸下就造成排版混乱状态。

问题解决方案就需要用到uni-app提供的宽屏适配指南来处理

在pages.json文件中有如下三个参数:

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

通过配置rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth,即可有效解决使用了rpx后,在宽屏下界面变的奇大无比的问题。

需要注意的rpxCalcMaxDeviceWidth可以尽量改小点,通过不同值来进行调试。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!