欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Mobile Web开发基础之四--处理手机设备的横竖屏问题

程序员文章站 2022-11-25 13:06:55
为了应对移动设备屏幕的碎片化，我们在开发mobile web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的...

为了应对移动设备屏幕的碎片化，我们在开发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"> 
 <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>
 
  • 低版本浏览器的平稳降级

    如果目标移动浏览器不支持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> 
 <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>

原英文网址：

以上所述是小编给大家介绍的mobile web开发基础之四--处理手机设备的横竖屏问题，希望对大家有所帮助！

上一篇： 详解如何构建Angular项目目录结构

下一篇： 我来掏吧！

推荐阅读