javascript检测移动设备横竖屏
如何判断
移动设备提供了两个对象，一个属性，一个事件：
（1）window.orientation 属于window对象上一个属性；共有三个值：0为竖屏模式（portrait）,90为向左反转变为横屏模式（landscape），-90为向右反转变为横屏模式（landscape），最后180就是设备上下互换还是竖屏模式。
（2）orientationchange 是一个event，在设备旋转时，会触发此事件，如同PC上使用的resize事件。
这两个搭配起来使用，很容易就能获得设备的横竖屏状态，代码如下：
(function(){
varinit=function(){
varupdateOrientation=function(){
varorientation=window.orientation;
switch(orientation){
case90:
case-90:
orientation='landscape';
break;
default:
orientation='portrait';
break;
}
//dosomething
//比如在html标签加一个状态
//然后根据不同状态，显示不同大小
document.body.parentNode.setAttribute('class',orientation);
};
window.addEventListener('orientationchange',updateOrientation,false);
updateOrientation();
};
window.addEventListener('DOMContentLoaded',init,false);
})();
在css中就可以这样写：
/**竖屏div边框显示蓝色**/
.portraitbodydiv{
border:1pxsolidblue;
}
/**竖屏div边框显示黄色**/
.landscapebodydiv{
border:1pxsolidyellow;
}
当然还可以使用mediaqueries的方式（推荐这种）：
@mediaalland(orientation:portrait){
bodydiv{
border:1pxsolidblue;
}
}
@mediaalland(orientation:landscape){
bodydiv{
border:1pxsolidyellow;
}
}
兼容性
如果window.orientation或者orientationchange在设备中不存在的情况怎么处理呢？（一般一个不存在，另一个也不存在，反之）
在前期开发中，经常会用Chrome的devicemodel调式，但是这个属性确实不存在，哪怎么获得这个值呢？简单的方式就是依据宽和高的大小比较判断，宽小于高为竖屏，宽大与高就是横屏。
获得结果的方式知道了，接下来就是怎么监听设备反转事件了，既然orientationchange不可用，就使用最基本的resize事件或者使用定时器检测，还是看代码：
(function(){
varupdateOrientation=function(){
varorientation=(window.innerWidth>window.innerHeight)?'landscape':'portrait';
document.body.parentNode.setAttribute('class',orientation);
};
varinit=function(){
updateOrientation();
//每5秒检查一次
//window.setInterval(updateOrientation,5000);
//监听resize事件
window.addEventListener('resize',updateOrientation,false);
};
window.addEventListener('DOMContentLoaded',init,false);
})();
最后，把以上两种方式合起来，就是一个完整的检测解决方案
(function(){
varsupportOrientation=(typeofwindow.orientation==='number'&&
typeofwindow.onorientationchange==='object');
varinit=function(){
varhtmlNode=document.body.parentNode,
orientation;
varupdateOrientation=function(){
if(supportOrientation){
orientation=window.orientation;
switch(orientation){
case90:
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属性判断当前是横屏还是竖屏，以便执行不同的操作。