检测移动设备横竖屏

• 使用场景

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

• 如何判断

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

• window.orientation   属于window对象上一个属性；共有三个值 ：0为竖屏模式（portrait）,90为向左反转变为横屏模式（landscape），-90为向右反转变为横屏模式（landscape），最后180就是设备上下互换还是竖屏模式。
• 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); })();

 

参考：

Dealing With Device Orientation

转载于:https://www.cnblogs.com/xbf321/p/dealing-with-device-orientation.html

总结

以上是生活随笔为你收集整理的检测移动设备横竖屏的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。