Mobile Web開發(fā)基礎之四--處理手機設備的橫豎屏問題

來源：懂視網責編：小采時間：2020-11-27 22:33:05

Mobile Web開發(fā)基礎之四--處理手機設備的橫豎屏問題

Mobile Web開發(fā)基礎之四--處理手機設備的橫豎屏問題:為了應對移動設備屏幕的碎片化，我們在開發(fā)Mobile Web應用時，一個最佳實踐就是采用流式布局，保證最大可能地利用有限的屏幕空間。由于屏幕存在著方向性，用戶在切換了屏幕的方向后，有些設計上或實現上的問題就會凸顯——我們至少需要處理一下當前顯示元素的

推薦度：

點擊下載本文 文檔為doc格式

導讀Mobile Web開發(fā)基礎之四--處理手機設備的橫豎屏問題:為了應對移動設備屏幕的碎片化，我們在開發(fā)Mobile Web應用時，一個最佳實踐就是采用流式布局，保證最大可能地利用有限的屏幕空間。由于屏幕存在著方向性，用戶在切換了屏幕的方向后，有些設計上或實現上的問題就會凸顯——我們至少需要處理一下當前顯示元素的

為了應對移動設備屏幕的碎片化，我們在開發(fā)Mobile Web應用時，一個最佳實踐就是采用流式布局，保證最大可能地利用有限的屏幕空間。由于屏幕存在著方向性，用戶在切換了屏幕的方向后，有些設計上或實現上的問題就會凸顯——我們至少需要處理一下當前顯示元素的寬度的適配（當然，要做的可能不僅僅是這個）。很多時候，我們需要為不同的屏幕方向來設計對應的應用顯示模式，這個時候，實時地獲知設備的模豎屏狀態(tài)就顯得極為重要。

window.orientation屬性與onorientationchange事件

window.orientation :這個屬性給出了當前設備的屏幕方向，0表示豎屏，正負90表示橫屏（向左與向右）模式
onorientationchange : 在每次屏幕方向在橫豎屏間切換后，就會觸發(fā)這個window事件，用法與傳統的事件類似

1：使用onorientationchange事件的回調函數，來動態(tài)地為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"> 
 <div> 
 內容 
 </div> 
 <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"> 
 <div> 
 內容 
 </div> 
 <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> 
 <div> 
 內容 
 </div> 
 </body> 
</html>

低版本瀏覽器的平穩(wěn)降級

如果目標移動瀏覽器不支持media query，同時window.orientation也不存在，則我們需要采用另外一種方式來實現————使用定時器“偽實時”地對比當前窗口的高(window.innerHeight)與寬(window.innerWidth)之比，從而判定當前的橫豎屏狀態(tài)。如下代碼所示：

<!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> 
 <div> 
 內容 
 </div> 
 </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> 
 <div> 
 內容 
 </div> 
 </body> 
</html>

原英文網址：http://davidbcalhoun.com/2010/dealing-with-device-orientation

以上所述是小編給大家介紹的Mobile Web開發(fā)基礎之四--處理手機設備的橫豎屏問題，希望對大家有所幫助！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com