移动端-横竖屏检测

在移动设备上访问我们的HTML页面，我们很多时候需要根据用户的横竖屏状态做一些操作，例如：我们做了一个H5页面，我们是按照竖屏开发的，当用户切换为横屏幕的时候，宽度变大，高度变小，页面的展示效果不好，此时我们需要进行样式的调整；在例如我们做了一个H5的小游戏，只能让用户横屏玩，当用户切换为竖屏幕的时候我们要给与相关的提示等...

只能检测不能控制

由于我们的HTML5页面是运行在手机浏览器或者Native App的web view中的(详情看Hybrid模式)，而横竖屏切换是手机内部的感应操作，HTML5无法直接的去调取系统级别的API，如果浏览器实现了这个功能，那么H5可以调取，但是目前大部分的浏览器都不支持；而且横竖屏的操控本身也有诸多的限制，比如用户禁止了横竖屏的切换，那么还是无法进行切换的...

所以要记住，HTML5可以检测出用户当前是横屏还是竖屏，但是不能禁止横竖屏的切换（如果浏览器提供了相关的功能，我们可以控制，例如：QQ和UC就实现了这个功能，我们可以通过设置META来控制横竖屏）

     //->QQ X5内核     <meta name="x5-orientation" content="portrait|landscape"/>      //->UC浏览器     <meta name="screen-orientation" content="portrait|landscape"/> 

点击查看更多的移动端META标签使用

在CSS3中检测

在CSS3中我们使用@MEDIA媒体查询进行检测，检测出来后可以进行样式的调整。

     @media all and (orientation: landscape) {         /*横屏*/         body {             background: blue;         }     }      @media all and (orientation: portrait) {         /*竖屏*/         body {             background: green;         }     } 

在JS中检测

在JS代码中我们可以使用orientationchange事件进行检测，检测出来后可以在JS中给予相关的提示。(在安卓机器上当切换完成后需要等待一段时间才能反应过来)

     ~function () {         window.addEventListener("orientationchange", function (ev) {             console.log(ev.orientation);         }, false);     }();