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

blessdyb

浏览: 236506 次
性别:
来自: 北京

最近访客更多访客>>

a1111b2222

sty00

ahbbzh

daemon_x2013

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

widget
javascript
Mobile Web
CSS

orientation mobile web media query landscape portrait

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

分享到：

HTML5 WebGame开源工具之impactjs | Mobile Web开发基础之三————由按键想到 ...

2012-05-22 11:40
浏览 21103
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Mobile Web开发基础之三————由按键想到的

Mobile Web开发基础之二————开发环境套件一览

Mobile Web开发基础之一————viewport标签

Fibonacci的非递归实现,Mobile Web横竖屏检测等

几个常用的检索排序算法的JavaScript实现

Canvas绘制的简单模拟时钟

JavaScript 创建对象方法列举

JavaScript Random

no.de 使用测试

使用widget进行简单移动应用开发(一)

JavaScript函数的几种特殊形式

Firebug七大扩展利器

JavaScript内置函数使用细节

基于OPhone的Mobile Widget联机应用开发基础

移动互联时代，Mobile widget将大行其道？

使用jQuery来完成键盘事件的浏览器匹配

JavaScript Date 对象与函数

Widget开发中的一些专门的术语

Widget应用的基本组成

什么是Widget

最近访客更多访客>>