珠峰html5培训之移动端横竖屏的检测开发

作者:zhouxiaotian日期:2016-08-14 22:22:11 点击:551 HTML5

移动端-横竖屏检测

在移动设备上访问我们的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);
    }();

上一篇: html5开发培训系列之Flexbox深入理解

下一篇: web前端开发:LESS语言特性全面剖析