橫豎屏檢測 orientation resize matchMedia

最近有人提需求，產品要適配橫豎屏，這就使人頭禿了呀。

這在家辦公也不讓閒着點。雖說需求提出來了，可是咱們身爲一個前端er，仍是要有本身的想法呀，咱們要統計一波數據看看到底有多少人在橫屏使用咱們的產品。

demo測試地址

方案一：orientation

window.addEventListener("orientationchange", function(event) {
    // 等於0或者180豎屏
    // 等於90或者-90度橫屏
    _this.eventValue = event.orientation || 
        (screen.orientation && screen.orientation.angle)
}, false);

1. 經過 orientationchange 事件來監聽橫豎屏的變化
2. 經過 orientation 來獲取當前屏幕的方向角度
3. 兼容性比較差，https://www.caniuse.com/#sear...

方案二：resize判斷寬高

基於上個方案的兼容性，那麼咱們搞個兼容性好一點的。

window.addEventListener("resize", function(event) {
    _this.innerWidth = window.innerWidth
    _this.innerHeight = window.innerHeight
}, false);

1. 經過 resize 事件來監聽瀏覽器的寬高變化
2. 經過比對寬高來判斷當前橫豎屏狀態。
3. 由於是移動端，因此鍵盤彈出的時候也會干擾。
4. 兼容性固然是棒棒的。

方案三：matchMedia 媒體查詢

matchMedia 是什麼？

matchMedia() 能夠解析任何一個 CSS @media 的特性，如 min-height, min-width, orientation 等。

matchMedia() 返回一個新的 MediaQueryList 對象，表示指定的媒體查詢字符串解析後的結果。

MediaQueryList 對象有如下兩個屬性：

• media：當前查詢的內容，也就是你傳入的內容。
• matches：檢測查詢結果，若是匹配，則值爲 true，不然爲 false。

如何使用

var mediaQueryList = window
    .matchMedia("screen and (orientation: portrait)");
if(window.mediaQueryList && mediaQueryList.addListener){
    mediaQueryList.addListener(function(){
        _this.matchMediaAddEvent = 
            mediaQueryList.matches?'豎屏':'橫屏'
    })
}

方案四：媒體查詢

看到這個方案你是否是滿頭問號。這個方案和上個不同嗎？

哈哈，這個方案是我在網上看到的，有多是那我的不知道 matchMedia 這個 API。或者是 API 有兼容性問題，他本身搞了一個 hack 方法。

原理也是依賴css的媒體查詢。只不過他經過定時比對樣式來判斷當前狀態。

微信公衆號：前端linong