摘要：毫無疑問，需要使用來監(jiān)聽橫豎屏的變化。其他需要監(jiān)聽橫豎屏的地方只需訂閱一下即可。實(shí)現(xiàn)思路創(chuàng)建包含標(biāo)識橫豎屏狀態(tài)的特定樣式通過向頁面中注入代碼回調(diào)函數(shù)中獲取橫豎屏的狀態(tài)這里我選擇的節(jié)點(diǎn)作為檢測樣式屬性。

前不久，做了一個(gè)H5項(xiàng)目，需要在橫豎屏變化時(shí)，做一些處理。毫無疑問，需要使用orientationchange來監(jiān)聽橫豎屏的變化。

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

代碼添加上后，就各種兼容性問題。這里兼容性問題出現(xiàn)在兩個(gè)地方：

orientationchange

event.orientation|screen.orientation.angle

如下是orientationchange事件的兼容性：

如下是screen.orientation的兼容性：

上述方案不行，只能另行他法了。google一下，了解到可以通過resize配合(window.inner/outerWidth, window.inner/outerHeight)來實(shí)現(xiàn)：

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

這種方案基本滿足大部分項(xiàng)目的需求，但是還是有些不足之處：

只要window的size變化，就會不斷觸發(fā)觸發(fā)resize事件?？梢允褂胹etTimeout來優(yōu)化一下

如果有多個(gè)地方需要監(jiān)聽橫豎屏，就需要注冊多個(gè)window.addEventListener("resize", function(event) {……})。能不能通過訂閱與發(fā)布模式來改進(jìn)一下，只注冊一個(gè)resize負(fù)責(zé)監(jiān)聽橫豎屏變化，只要橫豎發(fā)生變化就發(fā)布通知訂閱的對象。其他需要監(jiān)聽橫豎屏的地方只需訂閱一下即可。

關(guān)鍵代碼如下：

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

完整代碼猛擊這里

不過個(gè)人覺得通過window.innerWidth > window.innerHeight來實(shí)現(xiàn)的是一種偽檢測，有點(diǎn)不可靠。 可不可以通過瀏覽器來實(shí)現(xiàn)檢測？如基于CSS3@media媒體查詢來實(shí)現(xiàn)。

如下@media兼容性：

如上上圖所示，移動(dòng)端瀏覽器都支持CSS3 media。

實(shí)現(xiàn)思路：

創(chuàng)建包含標(biāo)識橫豎屏狀態(tài)的特定css樣式

通過JS向頁面中注入CSS代碼

resize回調(diào)函數(shù)中獲取橫豎屏的狀態(tài)

這里我選擇的節(jié)點(diǎn)font-family作為檢測樣式屬性。理由如下：

選擇主要為了避免reflow和repaint

選擇font-family樣式，主要是因?yàn)?b>font-family有如下特性：

優(yōu)先使用排在前面的字體。

如果找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。

如果所列出的字體，都無法滿足需要，則讓操作系統(tǒng)自行決定使用哪種字體。

這樣我們就可以指定特定標(biāo)識來標(biāo)識橫豎屏的狀態(tài)，不過需要將指定的標(biāo)識放置在其他字體的前面，這樣就不會引起hmtl字體的變化。

關(guān)鍵代碼如下：

    // 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效果：

可以再改進(jìn)一下，在支持orientationchange時(shí)，就使用原生的orientationchange，不支持則使用方案三。

關(guān)鍵代碼如下：

// 是否支持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);
    }
})();
// 監(jiān)聽
win.addEventListener(isOrientation ? eventType : "resize", callback, false);

完整代碼猛擊這里

目前，上述幾種方案都是通過自定制的訂閱與發(fā)布事件模式來實(shí)現(xiàn)的。這里可以基于瀏覽器的事件機(jī)制，來模擬orientationchange。即對orientationchange的不兼容進(jìn)行修復(fù)。

關(guān)鍵代碼如下：

var eventType = "orientationchange";
// 觸發(fā)原生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種方案，自己對移動(dòng)端橫豎屏檢測有了更進(jìn)一步的認(rèn)識，有些東西只有自己親身經(jīng)歷過才知道為什么要這么寫，自己也把其中緣由記錄在文章中，希望對大家有幫助。經(jīng)過5種方案的演變得到了最終orientationchange-fix，github地址：https://github.com/zhansingsong/orientationchange-fix