• QQ咨詢:4001806960
  • 咨詢熱線:400-180-6960

珠峰html5培訓之移動端橫豎屏的檢測開發

作者:zhouxiaotian日期:2016-08-14 22:22:11 點擊:484 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語言特性全面剖析

X-POWER-BY FNC V0.5.2 FROM ZZ42