javascript檢測(cè)移動(dòng)設(shè)備橫豎屏
如何判斷
移動(dòng)設(shè)備提供了兩個(gè)對(duì)象,一個(gè)屬性,一個(gè)事件:
(1)window.orientation 屬于window對(duì)象上一個(gè)屬性;共有三個(gè)值 :0為豎屏模式(portrait),90為向左反轉(zhuǎn)變?yōu)闄M屏模式(landscape),-90為向右反轉(zhuǎn)變?yōu)闄M屏模式(landscape),最后180就是設(shè)備上下互換還是豎屏模式。
(2)orientationchange 是一個(gè)event,在設(shè)備旋轉(zhuǎn)時(shí),會(huì)觸發(fā)此事件,如同PC上使用的resize事件。
這兩個(gè)搭配起來使用,很容易就能獲得設(shè)備的橫豎屏狀態(tài),代碼如下:
(function(){ var init = function(){ var updateOrientation = function(){ var orientation = window.orientation; switch(orientation){ case 90: case -90: orientation = 'landscape'; break; default: orientation = 'portrait'; break; } //do something //比如在html標(biāo)簽加一個(gè)狀態(tài) //然后根據(jù)不同狀態(tài),顯示不同大小 document.body.parentNode.setAttribute('class',orientation); }; window.addEventListener('orientationchange',updateOrientation,false); updateOrientation(); }; window.addEventListener('DOMContentLoaded',init,false); })();
在css中就可以這樣寫:
/**豎屏 div邊框顯示藍(lán)色**/ .portrait body div{ border:1px solid blue; } /**豎屏 div邊框顯示黃色**/ .landscape body div{ border:1px solid yellow; }
當(dāng)然還可以使用media queries的方式(推薦這種):
@media all and (orientation: portrait) { body div { border:1px solid blue; } } @media all and (orientation: landscape) { body div { border:1px solid yellow; } }
兼容性
如果window.orientation或者orientationchange在設(shè)備中不存在的情況怎么處理呢?(一般一個(gè)不存在,另一個(gè)也不存在,反之)
在前期開發(fā)中,經(jīng)常會(huì)用Chrome的device model調(diào)式,但是這個(gè)屬性確實(shí)不存在,哪怎么獲得這個(gè)值呢?簡(jiǎn)單的方式就是依據(jù)寬和高的大小比較判斷,寬小于高為豎屏,寬大與高就是橫屏。
獲得結(jié)果的方式知道了,接下來就是怎么監(jiān)聽設(shè)備反轉(zhuǎn)事件了,既然orientationchange不可用,就使用最基本的resize事件或者使用定時(shí)器檢測(cè),還是看代碼:
(function(){ var updateOrientation = function(){ var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait'; document.body.parentNode.setAttribute('class',orientation); }; var init = function(){ updateOrientation(); //每5秒檢查一次 //window.setInterval(updateOrientation,5000); //監(jiān)聽resize事件 window.addEventListener('resize',updateOrientation,false); }; window.addEventListener('DOMContentLoaded',init,false); })();
最后,把以上兩種方式合起來,就是一個(gè)完整的檢測(cè)解決方案
(function(){ var supportOrientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'object'); var init = function(){ var htmlNode = document.body.parentNode, orientation; var updateOrientation = function(){ if(supportOrientation){ orientation = window.orientation; switch(orientation){ case 90: case -90: orientation = 'landscape'; break; default: orientation = 'portrait'; break; } }else{ orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait'; } htmlNode.setAttribute('class',orientation); }; if(supportOrientation){ window.addEventListener('orientationchange',updateOrientation,false); }else{ //監(jiān)聽resize事件 window.addEventListener('resize',updateOrientation,false); } updateOrientation(); }; window.addEventListener('DOMContentLoaded',init,false); })();
總結(jié)
通過orientationchange事件來監(jiān)聽設(shè)備是否旋轉(zhuǎn),配合window.orientation屬性判斷當(dāng)前是橫屏還是豎屏,以便執(zhí)行不同的操作。
相關(guān)文章
Bootstrap模態(tài)框調(diào)用功能實(shí)現(xiàn)方法
這篇文章主要介紹了Bootstrap模態(tài)框調(diào)用功能實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-09-09利用js來實(shí)現(xiàn)縮略語列表、文獻(xiàn)來源鏈接和快捷鍵列表
本文主要對(duì)利用js來實(shí)現(xiàn)縮略語列表、文獻(xiàn)來源鏈接和快捷鍵列表的方法進(jìn)行詳細(xì)分析介紹。具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果,結(jié)合實(shí)例形式分析了微信小程序基于swiper組件的圖片滾動(dòng)效果相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12JS實(shí)現(xiàn)簡(jiǎn)單的鍵盤打字的效果
本文給大家分享的是使用javascript實(shí)現(xiàn)的簡(jiǎn)單的鍵盤打字效果,十分的簡(jiǎn)單實(shí)用,推薦給有需要的小伙伴參考下。2015-04-04JS使用Chrome瀏覽器實(shí)現(xiàn)調(diào)試線上代碼
這篇文章主要介紹了JS使用Chrome瀏覽器實(shí)現(xiàn)調(diào)試線上代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07Chart.js 輕量級(jí)HTML5圖表繪制工具庫(kù)(知識(shí)整理)
這篇文章主要介紹了Chart.js 輕量級(jí)HTML5圖表繪制工具庫(kù),Chart.js基于HTML5 canvas技術(shù)支持所有現(xiàn)代瀏覽器,并且針對(duì)IE7/8提供了降級(jí)替代方案,感興趣的小伙伴們可以參考一下2018-05-05基于Next.js實(shí)現(xiàn)在線Excel的詳細(xì)代碼
Next.js是一款React 開發(fā)框架,它可以幫助我們構(gòu)建 React 應(yīng)用程序。作為一個(gè)輕量級(jí)React服務(wù)端渲染應(yīng)用框架,這篇文章主要介紹了基于?Next.js實(shí)現(xiàn)在線Excel,需要的朋友可以參考下2022-08-08Javascript中暫停功能的實(shí)現(xiàn)代碼
Javascript中暫停功能的實(shí)現(xiàn)代碼...2007-03-03原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄鶭S實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08