您的位置:首页 - 教程 - JavaScript - 正文
js判断移动设备横竖屏
查看效果:http://hovertree.com/texiao/js/12/


使用场景
移动端的开发过程中,免不了要判断横竖屏,然后在执行其他操作,比如分别加载不同样式,横屏显示某些内容,竖屏显示其他内容等等。

如何判断
移动设备提供了两个对象,一个属性,一个事件:

window.orientation 属于window对象上一个属性;共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式。
orientationchange 是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件。
这两个搭配起来使用,很容易就能获得设备的横竖屏状态


代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js检测移动设备横竖屏- 何问起</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
<h2>js检测移动设备横竖屏</h2>
请使用移动设备查看效果,请开启屏幕旋转。结果如下:
<div id="screenhovertree" style="height:100px;width:320px;border:1px solid silver"></div>

<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/h/bjae/rg82kt4k.htm">原文</a>
<script>
/*
手机端 初始化判断横屏还是竖屏
*/
function orienthovertree() {
if (window.orientation == undefined) { $("#screenhovertree").html("请使用手机查看效果:<br />http://hovertree.com/texiao/js/12/"); };
if (window.orientation == 0 || window.orientation == 180) {
//竖屏
$("#screenhovertree").text("何问起:竖屏");
}
else if (window.orientation == 90 || window.orientation == -90) {
//横屏
$("#screenhovertree").text("何问起:横屏");
}

}
/* 在页面加载的时候调用 */
$(function () {
orienthovertree();
});

/* 在用户变化屏幕显示方向的时候调用*/
window.addEventListener("orientationchange", function () {
orienthovertree();
}, false);


</script>
</body>
</html>

评论: