app开发中需要根据业务需求实现对展示页面进行横屏或竖屏内容展示，常见用户操作逻辑为根据页面查看效果进行横屏、竖屏拿手机进行重力感应实现自动切换效果。

那么在uni-app中我们需要如何配置才能实现页面根据重力感应自动切换横竖屏呢？

一、pages.json文件中加入app-plus配置和globalStyle.pageOrientation配置

"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "uni-app",
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8",
	"pageOrientation": "auto" //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
},
"app-plus": {
	"screenOrientation": [
		"portrait-primary",     //可选，字符串类型，支持竖屏
		"portrait-secondary",   //可选，字符串类型，支持反向竖屏
		"landscape-primary",    //可选，字符串类型，支持横屏
		"landscape-secondary"   //可选，字符串类型，支持反向横屏
	],
	"background":"#F8F8F8"
},

二、manifest.json源代码模式加入如下代码

"app-plus": {
    "flexible": true
}
"screenOrientation" : [
   "portrait-primary", //可选，字符串类型，支持竖屏
   "portrait-secondary", //可选，字符串类型，支持反向竖屏
   "landscape-primary", //可选，字符串类型，支持横屏
   "landscape-secondary" //可选，字符串类型，支持反向横屏
]

本篇介绍仅为根据重力自动切换横竖屏，但常见的手机APP为竖屏模式，仅少部分页面需要横屏展示。建议进入页面后给用户提示横屏观看效果更加或直接强制整个页面横屏展示。