uniapp 横屏开发页面配置（仅支持App、H5）

目录

1、pages.json页配置页面大小

2、manifest.json文件修改

3、App.vue文件配置

 4、配置单位提示

---

1、pages.json页配置页面大小

在uniapp官网中提到了pages.json页面对于横屏页面单位的配置

参考官网这篇详解 https://uniapp.dcloud.net.cn/adapt

由于我开发的横屏项目的横屏设计图分辨率以及硬件分辨率是1280*800，所以我的页面配置是

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "***",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"navigationStyle": "custom",

         // 重点

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


		"app-plus": {
			"titleView": false
		}
	}

2、manifest.json文件修改

打开manifest.json文件，如图：

在源码视图的"app-plus"里添加子项

"orientation" : [ "landscape-primary" ],

3、App.vue文件配置

在App端，还需要在onLaunch生命周期函数中添加：

// #ifdef APP-PLUS
plus.screen.lockOrientation('landscape-primary'); //锁定横屏
plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏，标题栏和虚拟返回键都还可以显示)		
// #endif

 4、配置单位提示

在编译器中，点击工具，弹出一个界面，如图：

         重点在px转rpx/upx比例这里，需要用你当前的设计稿大小，单位是px，出除以750，得到的就是转化的比例。在设置保留几位小数就好了。

       开发中，输入设计稿的单位便会自动转换，如图