欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript檢測(cè)移動(dòng)設(shè)備橫豎屏

 更新時(shí)間:2016年05月21日 15:29:37   作者:xbf321  
移動(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í)行不同的操作。

相關(guān)文章

最新評(píng)論