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

2024-05-06 15:13:12

字体：大中小

来源：转载

供稿：网友

为了应对移动设备屏幕的碎片化，我们在开发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>

上一篇：javascript简写常用的12个技巧（可以大大减少你的js代码量）

下一篇：Vue单文件组件基础模板小结