UNI-APP_横屏设置_uniapp 横屏

1.官网全局设置

https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle

"globalStyle": {
	"pageOrientation": "auto"
}
1
2
3

2.某个页面横竖屏设置

在manifest.json中添加配置：

"orientation" : [
	// 竖屏正方向
	"portrait-primary",
	// 竖屏反方向
	"portrait-secondary",
	// 横屏正方向
	"landscape-primary",
	// 横屏反方向
	"landscape-secondary",
	//自然方向
	"default"
]
1
2
3
4
5
6
7
8
9
10
11
12

需要横竖屏切换的页面

onLoad（）{
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('default'); 
	// #endif

},
onUnload（）{
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif
}
1
2
3
4
5
6
7
8
9
10
11

不需要横竖屏切换的页面

onLoad（）{
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif

},
onUnload（）{
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif
}
1
2
3
4
5
6
7
8
9
10
11

强制横屏

mounted() {
	// plus.screen.lockOrientation( 'landscape-secondary');
	plus.screen.lockOrientation( 'landscape-primary');
}
1
2
3
4

iOS下失效解决方法
manifest.json文件打开源码在app-plus下添加以下四项

"screenOrientation" : [
   "portrait-primary",
   "portrait-secondary",
   "landscape-primary",
   "landscape-secondary"
],
1
2
3
4
5
6

uniapp云打包成app后，在Android12手机上横屏样式未填满手机界面；在ios手机上横屏不生效；问题解决
问题1：横屏在本地调试时是好的，云打包后在Android12上横屏样式宽度就只生效了一半。
解决：在onLoad中，定时500ms后再进行横屏操作（200ms不生效）

onLoad(option) {
	// #ifdef APP-PLUS
	setTimeout(() => {
		plus.screen.unlockOrientation();//解除屏幕方向的锁定，但是不一定是竖屏；
		lus.screen.lockOrientation('landscape-primary');
	}, 500)
	// #endif
},
1
2
3
4
5
6
7
8

问题2：云打包后在ios中横屏不生效。
解决：在manifest.json文件中的app-plus下、app-plus中的distribute下都添加横竖屏设置代码，之前只在distribute下添加，本地调试时android、ios都能生效，云打包后ios就失效了

"app-plus" : {
    /* 横竖屏设置 */
    "screenOrientation" : [ "portrait-primary", "landscape-primary" ],
    "distribute" : {
        "screenOrientation" : [ "portrait-primary", "landscape-primary" ],
    }
}
1
2
3
4
5
6
7

注意：真机调试需要打自定义基座

Screen.lockOrientation()用法：
https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/lockOrientation
.