橫豎屏檢測方法

時間 2019-11-11

標籤橫豎檢測方法简体版

原文原文鏈接

方案一：

// 監聽 orientation changes
window.addEventListener("orientationchange", function(event) {
// 根據event.orientation|screen.orientation.angle等於0|180、90|-90度來判斷橫豎屏
}, false);

代碼添加上後，就各類兼容性問題。這裏兼容性問題出如今兩個地方：css

orientationchangehtml
event.orientation|screen.orientation.anglegit

以下是orientationchange事件的兼容性：github

以下是screen.orientation的兼容性：瀏覽器

方案二：

上述方案不行，只能另行他法了。google一下，瞭解到能夠經過resize配合(window.inner/outerWidth, window.inner/outerHeight)來實現：dom

window.addEventListener("resize", function(event) {
    var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
    if(oritentation === 'portrait'){
    // do something ……
    } else {
    // do something else ……
    }
}, false);

這種方案基本知足大部分項目的需求，可是仍是有些不足之處：函數

只要window的size變化，就會不斷觸發觸發resize事件。可使用setTimeout來優化一下測試
若是有多個地方須要監聽橫豎屏，就須要註冊多個window.addEventListener("resize", function(event) {……})。能不能經過訂閱與發佈模式來改進一下，只註冊一個resize負責監聽橫豎屏變化，只要橫豎發生變化就發佈通知訂閱的對象。其餘須要監聽橫豎屏的地方只需訂閱一下便可。字體

關鍵代碼以下：優化

var resizeCB = function(){
      if(win.innerWidth > win.innerHeight){//初始化判斷
        meta.init = 'landscape';
        meta.current = 'landscape';
      } else {
        meta.init = 'portrait';
        meta.current = 'portrait';
      }
      return function(){
        if(win.innerWidth > win.innerHeight){
          if(meta.current !== 'landscape'){
            meta.current = 'landscape';
            event.trigger('__orientationChange__', meta);
          }
        } else {
          if(meta.current !== 'portrait'){
            meta.current = 'portrait';
            event.trigger('__orientationChange__', meta);
          }
        }
      }
    }();

完整代碼猛擊這裏

方案三：

不過我的以爲經過window.innerWidth > window.innerHeight來實現的是一種僞檢測，有點不可靠。可不能夠經過瀏覽器來實現檢測？如基於CSS3@media媒體查詢來實現。

以下@media兼容性：

如上上圖所示，移動端瀏覽器都支持CSS3 media。

實現思路：

建立包含標識橫豎屏狀態的特定css樣式
經過JS向頁面中注入CSS代碼
resize回調函數中獲取橫豎屏的狀態

這裏我選擇<html></html>的節點font-family做爲檢測樣式屬性。理由以下：

選擇<html></html>主要爲了不reflow和repaint
選擇font-family樣式，主要是由於font-family有以下特性：
- 優先使用排在前面的字體。
- 若是找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。
- 若是所列出的字體，都沒法知足須要，則讓操做系統自行決定使用哪一種字體。

這樣咱們就能夠指定特定標識來標識橫豎屏的狀態，不過須要將指定的標識放置在其餘字體的前面，這樣就不會引發hmtl字體的變化。

關鍵代碼以下：

// callback
    var resizeCB = function() {
        var hstyle = win.getComputedStyle(html, null),
            ffstr = hstyle['font-family'],
            pstr = "portrait, " + ffstr,
            lstr = "landscape, " + ffstr,
            // 拼接css
            cssstr = '@media (orientation: portrait) { .orientation{font-family:' + pstr + ';} } @media (orientation: landscape) {  .orientation{font-family:' + lstr + ';}}';
        // 載入樣式
        loadStyleString(cssstr);
        // 添加類
        html.className = 'orientation' + html.className;
        if (hstyle['font-family'] === pstr) { //初始化判斷
            meta.init = 'portrait';
            meta.current = 'portrait';
        } else {
            meta.init = 'landscape';
            meta.current = 'landscape';
        }
        return function() {
            if (hstyle['font-family'] === pstr) {
                if (meta.current !== 'portrait') {
                    meta.current = 'portrait';
                    event.trigger('__orientationChange__', meta);
                }
            } else {
                if (meta.current !== 'landscape') {
                    meta.current = 'landscape';
                    event.trigger('__orientationChange__', meta);
                }
            }
        }
    }();

完整代碼猛擊這裏

測試效果

portrait效果：

landscape效果：

方案四：

能夠再改進一下，在支持orientationchange時，就使用原生的orientationchange，不支持則使用方案三。

關鍵代碼以下：

// 是否支持orientationchange事件
var isOrientation = ('orientation' in window && 'onorientationchange' in window);
// callback
var orientationCB = function(e) {
    if (win.orientation === 180 || win.orientation === 0) {
        meta.init = 'portrait';
        meta.current = 'portrait';
    }
    if (win.orientation === 90 || win.orientation === -90) {
        meta.init = 'landscape';
        meta.current = 'landscape';
    }
    return function() {
        if (win.orientation === 180 || win.orientation === 0) {
            meta.current = 'portrait';
        }
        if (win.orientation === 90 || win.orientation === -90) {
            meta.current = 'landscape';
        }
        event.trigger(eventType, meta);
    }
};
var callback = isOrientation ? orientationCB() : (function() {
    resizeCB();
    return function() {
        timer && win.clearTimeout(timer);
        timer = win.setTimeout(resizeCB, 300);
    }
})();
// 監聽
win.addEventListener(isOrientation ? eventType : 'resize', callback, false);

完整代碼猛擊這裏

方案五：

目前，上述幾種方案都是經過自定製的訂閱與發佈事件模式來實現的。這裏能夠基於瀏覽器的事件機制，來模擬orientationchange。即對orientationchange的不兼容進行修復。

關鍵代碼以下：

var eventType = 'orientationchange';
// 觸發原生orientationchange
var fire = function() {
    var e;
    if (document.createEvent) {
        e = document.createEvent('HTMLEvents');
        e.initEvent(eventType, true, false);
        win.dispatchEvent(e);
    } else {
        e = document.createEventObject();
        e.eventType = eventType;
        if (win[eventType]) {
            win[eventType]();
        } else if (win['on' + eventType]) {
            win['on' + eventType]();
        } else {
            win.fireEvent(eventType, e);
        }
    }
}

完整代碼猛擊這裏

經過上述5種方案，本身對移動端橫豎屏檢測有了更進一步的認識，有些東西只有本身親身經歷過才知道爲何要這麼寫，本身也把其中原因記錄在文章中，但願對你們有幫助。通過5種方案的演變獲得了最終orientationchange-fix，github地址：https://github.com/zhansingsong/orientationchange-fix

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。