javascript检测移动设备横竖屏

如何判断

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

(1)window.orientation   属于window对象上一个属性;共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式。

(2)orientationchange     是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件。

这两个搭配起来使用,很容易就能获得设备的横竖屏状态,代码如下:

(function(){

var init = function(){

var updateOrientation = function(){

var orientation = window.orientation;

switch(orientation){

case 90:

case -90:

orientation = 'landscape';

break;

default:

orientation = 'portrait';

break;

}

//do something

//比如在html标签加一个状态

//然后根据不同状态,显示不同大小

document.body.parentNode.setAttribute('class',orientation);

};

window.addEventListener('orientationchange',updateOrientation,false);

updateOrientation();

};

window.addEventListener('DOMContentLoaded',init,false);

})();

在css中就可以这样写:

/**竖屏 div边框显示蓝色**/

.portrait body div{

border:1px solid blue;

}

/**竖屏 div边框显示黄色**/

.landscape body div{

border:1px solid yellow;

}

当然还可以使用media queries的方式(推荐这种):

@media all and (orientation: portrait) {

body div {

border:1px solid blue;

}

}

@media all and (orientation: landscape) {

body div {

border:1px solid yellow;

}

}

兼容性

如果window.orientation或者orientationchange在设备中不存在的情况怎么处理呢?(一般一个不存在,另一个也不存在,反之)

在前期开发中,经常会用Chrome的device model调式,但是这个属性确实不存在,哪怎么获得这个值呢?简单的方式就是依据宽和高的大小比较判断,宽小于高为竖屏,宽大与高就是横屏。

获得结果的方式知道了,接下来就是怎么监听设备反转事件了,既然orientationchange不可用,就使用最基本的resize事件或者使用定时器检测,还是看代码:

(function(){

var updateOrientation = function(){

var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';

document.body.parentNode.setAttribute('class',orientation);

};

var init = function(){

updateOrientation();

//每5秒检查一次

//window.setInterval(updateOrientation,5000);

//监听resize事件

window.addEventListener('resize',updateOrientation,false);

};

window.addEventListener('DOMContentLoaded',init,false);

})();

最后,把以上两种方式合起来,就是一个完整的检测解决方案

(function(){

var supportOrientation = (typeof window.orientation === 'number' &&

typeof window.onorientationchange === 'object');

var init = function(){

var htmlNode = document.body.parentNode,

orientation;

var updateOrientation = function(){

if(supportOrientation){

orientation = window.orientation;

switch(orientation){

case 90:

case -90:

orientation = 'landscape';

break;

default:

orientation = 'portrait';

break;

}

}else{

orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';

}

htmlNode.setAttribute('class',orientation);

};

if(supportOrientation){

window.addEventListener('orientationchange',updateOrientation,false);

}else{

//监听resize事件

window.addEventListener('resize',updateOrientation,false);

}

updateOrientation();

};

window.addEventListener('DOMContentLoaded',init,false);

})();

总结

通过orientationchange事件来监听设备是否旋转,配合window.orientation属性判断当前是横屏还是竖屏,以便执行不同的操作。

以上是 javascript检测移动设备横竖屏 的全部内容, 来源链接: utcz.com/z/340369.html

回到顶部