uniapp develops H5 horizontal screen adaptation solution

The uniapp official document has a horizontal screen mode in the APP, WeChat, and QQ applets, but it does not take effect on the H5 side. You need to write it yourself.

1: H5 horizontal screen embedded in webview of app or applet

The applet has a screen rotation configuration in the entire project configuration or a single page configuration.
For details, see: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

The app class has the same configuration, specifically ask the app side, the same.

h5 At this time, the project only needs to be developed normally . When the browser is debugging, there is a rotation button, and the horizontal screen debugging is fine~~

.

Two: Pure H5 horizontal screen project (not embedded, or the shell does not open the horizontal screen mode)

Project configuration pageOrientation – the exported H5 side does not take effect! ! !
pages.json > globalStyle > pageOrientation (H5 does not work!!!)

"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape

solution:

1. js processing:

App.vue > onLaunch :

// 初始化横屏
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
var detectOrient = function() {
    
    
	var width = document.documentElement.clientWidth,
		height = document.documentElement.clientHeight,
		$wrapper = document.getElementsByTagName('body')[0],
		style = "";
	if (width >= height) {
    
     // 横屏
		style += "width:" + width + "px;"; // 注意旋转后的宽高切换
		style += "height:" + height + "px;";
		style += "-webkit-transform: rotate(0); transform: rotate(0);";
		style += "-webkit-transform-origin: 0 0;";
		style += "transform-origin: 0 0;";
		console.log(1)
	} else {
    
     // 竖屏
		style += "width:" + height + "px;";
		style += "height:" + width + "px;";
		style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
		// 注意旋转中点的处理
		style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
		style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
		console.log(2)
	}
	$wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();

2. CSS processing:
App.vue > style:

	html{
    
    
		width: 100vh;
		height: 100vw;
		-webkit-transform: rotate(90deg);
		-webkit-transform-origin: 50vw 50vw;
		transform: rotate(90deg);
		transform-origin: 50vw 50vw;
	}

---

.

Kind tips:

1. The H5 side uses css3 rotation to process the horizontal screen of the project. The unit in the project should pay attention to the unit of vh in the horizontal direction, and vw in the vertical direction of css (according to the rotation later)
2. Multi-terminal development, judgment environment execution. Apps and applets directly have landscape mode
3. According to the dom loading order, the js execution calculation will be after the page dom, and there will be a flash of the vertical screen first and then the horizontal screen. It is recommended to use css scheme. Rotated 90 degrees across the board, no flickering. (According to the dom loading order. Pay attention to the pitfalls, you can tolerate a flash and ignore it once)

---

This is the end, if you have a better solution, please leave a message below