uniapp 小程序横屏处理方案

uniapp小程序横屏处理方案

在pages.json中添加 pageOrientation:“landscape”

				{
					"path":"pages/studyList/studyList",
					"style":{
						"enablePullDownRefresh":false,
						"navigationStyle":"custom",
						"pageOrientation": "landscape"
					}
				},

横屏单位问题 因rpx是根据 屏幕的宽度来进行分配的 横屏屏幕宽度变宽 会导致尺寸变大
在style里面 加入如下代码

	@function tovmin($rpx){//$rpx为需要转换的字号
	  @return #{$rpx * 100 / 750}vmin;
	}
	.container{
		width:tovmin(70) //此时70和横屏的70rpx尺寸一样
	}

后续 在后来的使用中 发现pc中的微信小程序 不能够横屏 这就导致了 pc在横屏中样式出现bug
解决办法 在manifest.json中微信小程序中配置 “resizable” : true 这样就解决了 pc端横屏预览的bug