首頁  >  文章  >  web前端  >  行動端開發之處理手機設備的橫豎屏

行動端開發之處理手機設備的橫豎屏

巴扎黑
巴扎黑原創
2017-08-12 16:24:481384瀏覽

這篇文章主要介紹了Mobile Web開發基礎之-—處理手機設備的橫豎屏,window.orientation屬性與onorientationchange事件以及media query方式是開發過程中需要注意到的兩種解決方式,需要的朋友可以參考下

為了應對行動裝置螢幕的碎片化,我們在開發Mobile Web應用時,一個最佳實踐就是採用串流佈局,保證最大可能地利用有限的螢幕空間。由於螢幕存在著方向性,使用者在切換了螢幕的方向後,有些設計上或實現上的問題就會凸顯——我們至少需要處理一下當前顯示元素的寬度的適配(當然,要做的可能不僅僅是這個)。很多時候,我們需要為不同的螢幕方向來設計對應的應用顯示模式,而這個時候,即時獲知設備的模垂直螢幕狀態就顯得極為重要。
 
window.orientation屬性與onorientationchange事件

#window.orientation :這個屬性給了目前裝置的螢幕方向,0表示豎屏,正負90表示橫螢幕(向左與向右)模式
onorientationchange : 在每次螢幕方向在橫豎螢幕間切換後,就會觸發這個window事件,用法與傳統的事件類似
 
1:使用onorientationchange事件的回呼函數,來動態地為body標籤添加一個叫做orient的屬性,同時以body[orient=landspace]或body[orient=portrait]的方式在css中定義對應的樣式,這樣就可以實現在不同的屏幕模式下顯示不同的樣式。如下程式碼範例:


<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>横竖屏切换检测</title> 
  <style type="text/css"> 
   body[orient=landscape]{ 
    background-color: #ff0000; 
   } 
 
   body[orient=portrait]{ 
    background-color: #00ffff; 
   } 
  </style> 
 </head> 
 <body orient="landspace"> 
  <p> 
   内容 
  </p> 
  <script type="text/javascript"> 
   (function(){ 
    if(window.orient==0){ 
     document.body.setAttribute("orient","portrait"); 
    }else{ 
     document.body.setAttribute("orient","landscape"); 
    } 
   })(); 
   window.onorientationchange=function(){ 
    var body=document.body; 
    var viewport=document.getElementById("viewport"); 
    if(body.getAttribute("orient")=="landscape"){ 
     body.setAttribute("orient","portrait"); 
    }else{ 
     body.setAttribute("orient","landscape"); 
    } 
   }; 
  </script> 
 </body> 
</html>

 2: 類似的思路,不透過CSS的屬性選擇器來實現,如下程式碼的實作方案:


#
<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>横竖屏切换检测</title> 
  <style type="text/css"> 
   .landscape body { 
    background-color: #ff0000; 
   } 
 
   .portrait body { 
    background-color: #00ffff; 
   } 
  </style> 
 </head> 
 <body orient="landspace"> 
  <p> 
   内容 
  </p> 
  <script type="text/javascript"> 
   (function(){ 
    var init=function(){ 
     var updateOrientation=function(){ 
      var orientation=window.orientation; 
      switch(orientation){ 
       case 90: 
       case -90: 
        orientation="landscape"; 
        break; 
       default: 
        orientation="portrait"; 
        break; 
      } 
      document.body.parentNode.setAttribute("class",orientation); 
     }; 
 
     window.addEventListener("orientationchange",updateOrientation,false); 
     updateOrientation(); 
    }; 
    window.addEventListener("DOMContentLoaded",init,false); 
   })(); 
  </script> 
 </body> 
</html>

 
使用media query方式
    這是更方便的方式,使用純CSS就實現了對應的功能,如下程式碼示範:


<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>横竖屏切换检测</title> 
  <style type="text/css"> 
   @media all and (orientation : landscape) { 
    body { 
     background-color: #ff0000; 
    } 
   } 
 
   @media all and (orientation : portrait){ 
    body { 
     background-color: #00ff00; 
    } 
   } 
  </style> 
 </head> 
 <body> 
  <p> 
   内容 
  </p> 
 </body> 
</html>

 低版瀏覽器的平穩降級
     如果目標行動瀏覽器不支援media query,同時window.orientation也不存在,則我們需要採取另一種方式來實現———使用定時器「偽實時」地比較目前視窗的高(window.innerHeight)與寬(window.innerWidth)之比,從而判定目前的橫豎螢幕狀態。如下程式碼所示:


<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>按键</title> 
  <style type="text/css"> 
   .landscape body { 
    background-color: #ff0000; 
   } 
 
   .portrait body { 
    background-color: #00ffff; 
   } 
  </style> 
  <script type="text/javascript"> 
   (function(){ 
    var updateOrientation=function(){ 
     var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait"; 
     document.body.parentNode.setAttribute("class",orientation); 
    }; 
 
    var init=function(){ 
     updateOrientation(); 
     window.setInterval(updateOrientation,5000); 
    }; 
    window.addEventListener("DOMContentLoaded",init,false); 
   })(); 
  </script> 
 </head> 
 <body> 
  <p> 
   内容 
  </p> 
 </body> 
</html>

 統一解決方案
    將上述的兩個解決方案整合在一起,就可以實作一個跨瀏覽器的解決方案,如下程式碼:


<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>横竖屏切换检测</title> 
  <style type="text/css"> 
   .landscape body { 
    background-color: #ff0000; 
   } 
 
   .portrait body { 
    background-color: #00ffff; 
   } 
  </style> 
  <script type="text/javascript"> 
   (function(){ 
    var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); 
 
    var updateOrientation=function(){ 
     if(supportOrientation){ 
      updateOrientation=function(){ 
       var orientation=window.orientation; 
       switch(orientation){ 
        case 90: 
        case -90: 
         orientation="landscape"; 
         break; 
        default: 
         orientation="portrait"; 
       } 
       document.body.parentNode.setAttribute("class",orientation); 
      }; 
     }else{ 
      updateOrientation=function(){ 
       var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait"; 
       document.body.parentNode.setAttribute("class",orientation); 
      }; 
     } 
     updateOrientation(); 
    }; 
 
    var init=function(){ 
     updateOrientation(); 
     if(supportOrientation){ 
      window.addEventListener("orientationchange",updateOrientation,false); 
     }else{  
      window.setInterval(updateOrientation,5000); 
     } 
    }; 
    window.addEventListener("DOMContentLoaded",init,false); 
   })(); 
  </script> 
 </head> 
 <body> 
  <p> 
   内容 
  </p> 
 </body> 
</html>

以上是行動端開發之處理手機設備的橫豎屏的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn