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>

 

posted @ 2015-06-02 15:34  axl234  阅读(231)  评论(0编辑  收藏  举报