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属性判断当前是横屏还是竖屏，以便执行不同的操作。