返回介绍

InterfaceOrientation

发布于 2021-10-21 18:08:19 字数 2584 浏览 905 评论 0 收藏 0

获取应用的横竖屏信息

方法:

事件:

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注意事项

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。