首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Mobile Web开发基础之4————处理设备的横竖屏

2012-07-26 
Mobile Web开发基础之四————处理设备的横竖屏??? 为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用

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

【原文】http://davidbcalhoun.com/2010/dealing-with-device-orientation

?

?

热点排行