移動(dòng)端的開發(fā)過程中，免不了要判斷橫豎屏，然后在執(zhí)行其他操作，比如分別加載不同樣式，橫屏顯示某些內(nèi)容，豎屏顯示其他內(nèi)容等等。

如何判斷

移動(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í)行不同的操作。