uniapp页面适配平板和手机

  • Post author:
  • Post category:uniapp




一、移动端优先

一般建议直接给出750px的手机设计稿,通过rpx等比缩放。这里需要注意的是uniapp默认适配的最大屏幕宽度为960px,超过这个范围rpx将不生效,而某些平板的尺寸比如ipad pro宽度超过了这个数值,所以需要在pages.json中添加配置:

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



二、平板优先

如果项目组给的是平板尺寸设计稿,这时候进行适配有许多注意事项。



1. 将设计稿尺寸改为750px,并添加配置(同第一点)



2. 字体适配

rpx等比缩放方案可能将字体变的过大或过小,而浏览器端文字大小最小为12px,app中字体虽然没有最小限制,但是字体过小看的不舒适,不小于14px较为合适。


(1)使用px


固定字体大小,手机端字体大小为平板字体差不多两倍,此办法灵活性较低


(2)使用媒体查询


uniapp默认字体大小24~28rpx,此字体大小合理所以无须改动,但是在平板上会变的过大,所以我们可以使用媒体查询将平板的正文字体设置为16rpx左右,在App.vue中全局设置即可,其他字体例如标题可以单独设置大小,这样可以减轻工作量。

page{
	@media #{$pad}{
		font-size: 18rpx;
	}
}

使用媒体的灵活性较高,但是可能让我们的代码变得繁琐,而scss可以让我们优雅的编写媒体查询代码,在全局scss文件中添加变量:

$pad: "(min-width: 500px) and (max-width: 1366px)"; //平板
$phone: "(min-width: 0px) and (max-width: 500px)"; //手机



3. 布局

(1). 平板由于宽度比手机大,设计稿中左右两栏的布局在移动端改为单栏布局

(2). 某些尺寸在手机端不应该缩小而应该放大,放大的比例大致为手机字体/平板字体

(3). 有些样式方面例如使用某组件,可能需要用到js控制,uniapp判断是平板还是手机的代码:

// 判断是否是平板
uni.getSystemInfo({
	success: (res)=>{
		console.log("屏幕尺寸:", res.windowWidth, res.windowHeight)
		if(res.windowWidth > 500){
			Vue.prototype.pad = true
		}else{
			Vue.prototype.pad = false
		}
	}
});

由于添加到Vue原型上,则可以在每个页面上直接使用pad属性判断

例如,使用uview网格布局,在平板上显示3列,在手机端显示两列:

<u-grid :col="pad ? 3 : 2" :border="false">
	<u-grid-item>
		网格内容
	</u-grid-item>
</u-grid>



版权声明:本文为qq_42864422原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。