JavaScript

超轻量级php框架startmvc

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

更新时间:2020-05-29 13:42:01 作者:startmvc
为了应对移动设备屏幕的碎片化,我们在开发MobileWeb应用时,一个最佳实践就是采用流式布

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

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

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

mobile web 开发基础 手机设备 横竖屏