InterfaceOrientation

优质

小牛编辑

142浏览

2023-12-01

获取应用的横竖屏信息

方法：

window.orientation: 获取当前设备横竖屏状态

事件：

orientationchange: 当屏幕旋转时的通知事件

window.orientation

获取当前设备横竖屏状态


var screen_orientation = window.orientation;

参数：

无

返回值：

number : 0 正常方向 -90 屏幕顺时钟旋转90度 90 屏幕逆时针旋转90度 180 屏幕旋转180度

平台支持：

Android - 2.2+ (支持) :
支持
iOS - 4.3+ (支持) :
支持

orientationchange

当屏幕旋转时的通知事件


document.addEventListener("orientationchange", orientationchangeCB);

说明：

orientationchangeCB 类型

平台支持：

Android - 2.2+ (支持) :
支持
iOS - 4.3+ (支持) :
支持

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<title>Orientation Example</title>
	</head>
	<body style="background:#0f0" >
		<button onclick="plus.webview.currentWebview().close()">Close</button><br/>
		<button onclick="getOrientation()">Get orientation</button>
	<div id="output"></div>
	<script type="text/javascript" >
function updateOrientation() {
	var displayStr = "Orientation : ";
	switch(window.orientation)
	{
	case 0:
	displayStr += "Portrait";
	break;
	case -90:
	displayStr += "Landscape (right, screen turned clockwise)";
	break;
	case 90:
	displayStr += "Landscape (left, screen turned counterclockwise)";
	break;
	case 180:
	displayStr += "Portrait (upside-down portrait)";
	break;
	}
	document.getElementById("output").innerHTML = displayStr;
	console.log(displayStr);
}

//Get initialize orientation. 
document.addEventListener("orientationchange",updateOrientation,false);
window.addEventListener("orientationchange",updateOrientation,false)

function getOrientation(){
	var str="Orientation: "+window.orientation;
	console.log(str);
	alert(str);
}
	</script>
	</body>
</html>

uni-app使用plus注意事项