javascript檢測行動裝置橫豎屏_javascript技巧

如何判斷

行動裝置提供了兩個對象，一個屬性，一個事件：

（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屬性判斷當前是橫屏還是豎屏，以便執行不同的操作。