更靠譜的H5橫豎屏檢測方法(js代碼)
前不久,做了一個(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變化,就會(huì)不斷觸發(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)識(shí)橫豎屏狀態(tài)的特定css樣式
通過JS向頁面中注入CSS代碼
resize回調(diào)函數(shù)中獲取橫豎屏的狀態(tài)
這里我選擇<html></html>的節(jié)點(diǎn)font-family作為檢測樣式屬性。理由如下:
選擇<html></html>主要為了避免reflow和repaint
選擇font-family樣式,主要是因?yàn)閒ont-family有如下特性:
- 優(yōu)先使用排在前面的字體。
- 如果找不到該種字體,或者該種字體不包括所要渲染的文字,則使用下一種字體。
- 如果所列出的字體,都無法滿足需要,則讓操作系統(tǒng)自行決定使用哪種字體。
這樣我們就可以指定特定標(biāo)識(shí)來標(biāo)識(shí)橫豎屏的狀態(tài),不過需要將指定的標(biāo)識(shí)放置在其他字體的前面,這樣就不會(huì)引起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)識(shí),有些東西只有自己親身經(jīng)歷過才知道為什么要這么寫,自己也把其中緣由記錄在文章中,希望對大家有幫助。經(jīng)過5種方案的演變得到了最終orientationchange-fix,github地址:https://github.com/zhansingsong/orientationchange-fix
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS+CSS實(shí)現(xiàn)DIV層的展開、收縮效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)DIV層的展開、收縮效果,以兩個(gè)完整實(shí)例介紹了JS控制DIV層的展開、收縮效果,感興趣的小伙伴們可以參考一下2016-01-01統(tǒng)一接口:為FireFox添加IE的方法和屬性的js代碼
統(tǒng)一接口:為FireFox添加IE的方法和屬性的js代碼...2007-03-03原生js實(shí)現(xiàn)class的添加和刪除簡單代碼
下面小編就為大家?guī)硪黄鷍s實(shí)現(xiàn)class的添加和刪除簡單代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07JavaScript中字符串分割函數(shù)split用法實(shí)例
這篇文章主要介紹了JavaScript中字符串分割函數(shù)split用法,實(shí)例分析了javascript中split函數(shù)操作字符串的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04Javascript將string類型轉(zhuǎn)換int類型
今天網(wǎng)站有個(gè)小功能要判斷用戶購買商品數(shù)量是否大于庫存數(shù)據(jù),如果大于庫存數(shù)量,就給予提示。2010-12-12