bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

MobileWeb開發(fā)基礎(chǔ)之四--處理手機設(shè)備的橫豎屏問題

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

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供鎮(zhèn)遠網(wǎng)站建設(shè)、鎮(zhèn)遠做網(wǎng)站、鎮(zhèn)遠網(wǎng)站設(shè)計、鎮(zhèn)遠網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鎮(zhèn)遠企業(yè)網(wǎng)站模板建站服務(wù)，十載鎮(zhèn)遠做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

  • window.orientation屬性與onorientationchange事件

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

1：使用onorientationchange事件的回調(diào)函數(shù)，來動態(tài)地為body標簽添加一個叫orient的屬性，同時以body[orient=landspace]或body[orient=portrait]的方式在css中定義對應(yīng)的樣式，這樣就可以實現(xiàn)在不同的屏幕模式下顯示不同的樣式。如下代碼示例：

<!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> 
  內(nèi)容 
 </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的屬性選擇器來實現(xiàn)，如下代碼的實現(xiàn)方案：

<!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> 
  內(nèi)容 
 </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就實現(xiàn)了對應(yīng)的功能，如下代碼演示：

<!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> 
  內(nèi)容 
 </div> 
 </body> 
</html>
 
  • 低版本瀏覽器的平穩(wěn)降級

    如果目標移動瀏覽器不支持media query，同時window.orientation也不存在，則我們需要采用另外一種方式來實現(xiàn)————使用定時器“偽實時”地對比當前窗口的高(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> 
  內(nèi)容 
 </div> 
 </body> 
</html>
  •  統(tǒng)一解決方案

    將以上的兩種解決方案整合在一起，就可以實現(xiàn)一個跨瀏覽器的解決方案，如下代碼：

<!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> 
  內(nèi)容 
 </div> 
 </body> 
</html>

原英文網(wǎng)址：http://davidbcalhoun.com/2010/dealing-with-device-orientation

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

當前標題：MobileWeb開發(fā)基礎(chǔ)之四--處理手機設(shè)備的橫豎屏問題
網(wǎng)站鏈接：http://vcdvsql.cn/article40/gdgjeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、建站公司、Google、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司