• 使用場景

移動端的開發過程中，免不了要判斷橫豎屏，然后在執行其他操作，比如分別加載不同樣式，橫屏顯示某些內容，豎屏顯示其他內容等等。

• 如何判斷

移動設備提供了兩個對象，一個屬性，一個事件：

• window.orientation?? 屬于window對象上一個屬性；共有三個值 ：0為豎屏模式（portrait）,90為向左反轉變為橫屏模式（landscape），-90為向右反轉變為橫屏模式（landscape），最后180就是設備上下互換還是豎屏模式。
• 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); })();

?

參考：

Dealing With Device Orientation

轉載于:https://www.cnblogs.com/xbf321/p/dealing-with-device-orientation.html

總結

以上是生活随笔為你收集整理的检测移动设备横竖屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。