移动端-横竖屏检测

在移动设备上访问我们的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"/>

在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);
    }();