更靠譜的橫豎屏檢測方法

2021-09-08 04:21:07 字數 3243 閱讀 5276

前不久,做了乙個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 }}

完整**猛擊這裡

更靠譜的橫豎屏檢測方法

前不久,做了乙個h5專案,需要在橫豎屏變化時,做一些處理。毫無疑問,需要使用orientationchange來監聽橫豎屏的變化。方案一 監聽 orientation changes window.addeventlistener orientationchange function event f...

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

前不久,做了乙個h5專案,需要在橫豎屏變化時,做一些處理。毫無疑問,需要使用orientationchange來監聽橫豎屏的變化。方案一 監聽 orientation changes window.addeventlistener orientationchange function event f...

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

當下人們的生活成本提高,特別是年輕一代,他們身上肩負的壓力無比巨大,各種月光族 日光族頻頻出現。在這種大環境下,年輕人只能謀求乙份高收入的工作,或者利用有限的資金進行投資理財。值得慶幸的是,隨著網路的快速發展,依託於網路而衍生的網際網路金融產品 人人貸財富,為我們提供一種靈活方便的理財投資渠道。或許...