更靠譜的橫豎屏檢測方法

前不久，做了乙個h5專案，需要在橫豎屏變化時，做一些處理。毫無疑問，需要使用orientationchange來監聽橫豎屏的變化。

方案一：

// 監聽 orientation changes
window.addeventlistener("orientationchange", function(event) , false);

**新增上後，就各種相容性問題。這裡相容性問題出現在兩個地方：

如下是orientationchange事件的相容性：

如下是screen.orientation的相容性：

方案二：

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

window.addeventlistener("resize", function(event)  else 
}, false);

這種方案基本滿足大部分專案的需求，但是還是有些不足之處：關鍵**如下：

var resizecb = function() else 
return function()
} else }}
}();

完整**猛擊這裡方案三：不過個人覺得通過window.innerwidth > window.innerheight來實現的是一種偽檢測，有點不可靠。可不可以通過瀏覽器來實現檢測？如基於css3@media**查詢來實現。

如下@media相容性：

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

實現思路：

這裡我選擇的節點font-family作為檢測樣式屬性。理由如下：

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

關鍵**如下：

// callback
var resizecb = function()  } @media (orientation: landscape) }';
// 載入樣式        
loadstylestring(cssstr);
// 新增類
html.classname = 'orientation' + html.classname;
if (hstyle['font-family'] === pstr)  else 
return function() 
} else }}
}();

完整**猛擊這裡測試效果

方案四：

可以再改進一下，在支援orientationchange時，就使用原生的orientationchange，不支援則使用方案三。

關鍵**如下：

// 是否支援orientationchange事件
var isorientation = ('orientation' in window && 'onorientationchange' in window);
// callback
var orientationcb = function(e) 
if (win.orientation === 90 || win.orientation === -90) 
return function() 
if (win.orientation === 90 || win.orientation === -90) 
event.trigger(eventtype, meta);
}};var callback = isorientation ? orientationcb() : (function() 
})();
// 監聽
win.addeventlistener(isorientation ? eventtype : 'resize', callback, false);

完整**猛擊這裡方案五：目前，上述幾種方案都是通過自定製的訂閱與發布事件模式來實現的。這裡可以基於瀏覽器的事件機制，來模擬orientationchange。即對orientationchange的不相容進行修復。

關鍵**如下：

var eventtype = 'orientationchange';
// 觸發原生orientationchange
var fire = function()  else  else if (win['on' + eventtype])  else }}

完整**猛擊這裡

更靠譜的橫豎屏檢測方法

更靠譜的橫豎屏檢測方法

更靠譜的移動端橫豎屏檢測方法

人人貸財富，為理財提供更靠譜的選擇

更靠譜的橫豎屏檢測方法

更靠譜的橫豎屏檢測方法

更靠譜的移動端橫豎屏檢測方法

人人貸財富，為理財提供更靠譜的選擇

相關推薦