如何判斷
移動設備提供了兩個對象,一個屬性,一個事件:
(1)window.orientation 屬於window對象上一個屬性;共有三個值 :0為豎屏模式(portrait),90為向左反轉變為橫屏模式(landscape),-90為向右反轉變為橫屏模式(landscape),最後180就是設備上下互換還是豎屏模式。
(2)orientationchange 是一個event,在設備旋轉時,會觸發此事件,如同PC上使用的resize事件。
這兩個搭配起來使用,很容易就能獲得設備的橫豎屏狀態,代碼如下:
(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標簽加一個狀態 //然後根據不同狀態,顯示不同大小 document.body.parentNode.setAttribute('class',orientation); }; window.addEventListener('orientationchange',updateOrientation,false); updateOrientation(); }; window.addEventListener('DOMContentLoaded',init,false); })();
在css中就可以這樣寫:
/**豎屏 div邊框顯示藍色**/ .portrait body div{ border:1px solid blue; } /**豎屏 div邊框顯示黃色**/ .landscape body div{ border:1px solid yellow; }
當然還可以使用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在設備中不存在的情況怎麼處理呢?(一般一個不存在,另一個也不存在,反之)
在前期開發中,經常會用Chrome的device model調式,但是這個屬性確實不存在,哪怎麼獲得這個值呢?簡單的方式就是依據寬和高的大小比較判斷,寬小於高為豎屏,寬大與高就是橫屏。
獲得結果的方式知道了,接下來就是怎麼監聽設備反轉事件了,既然orientationchange不可用,就使用最基本的resize事件或者使用定時器檢測,還是看代碼:
(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); //監聽resize事件 window.addEventListener('resize',updateOrientation,false); }; window.addEventListener('DOMContentLoaded',init,false); })();
最後,把以上兩種方式合起來,就是一個完整的檢測解決方案
(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{ //監聽resize事件 window.addEventListener('resize',updateOrientation,false); } updateOrientation(); }; window.addEventListener('DOMContentLoaded',init,false); })();
總結
通過orientationchange事件來監聽設備是否旋轉,配合window.orientation屬性判斷當前是橫屏還是豎屏,以便執行不同的操作。