监控mobile的横屏、竖屏

最新推荐文章于 2018-04-19 10:26:09 发布

kongjiea

最新推荐文章于 2018-04-19 10:26:09 发布

阅读量2.2k

点赞数

分类专栏：移动资讯 html5 javascript

本文链接：https://blog.csdn.net/kongjiea/article/details/41445943

版权

javascript 同时被 3 个专栏收录

87 篇文章 2 订阅

订阅专栏

html5

31 篇文章 1 订阅

订阅专栏

移动资讯

14 篇文章 0 订阅

订阅专栏

为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。

window.orientation属性与onorientationchange事件

window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式

onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似

1：使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：

    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">  
             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的属性选择器来实现，如下代码的实现方案：

    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>  
     </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就实现了对应的功能，如下代码演示：

    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">  
             @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)之比，从而判定当前的横竖屏状态。如下代码所示：

    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 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>  

统一解决方案

将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：

    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

kongjiea

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
监控mobile的横屏、竖屏

为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为
复制链接

扫一扫

专栏目录