`
blessdyb
  • 浏览: 231762 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

orientationmobile webmedia querylandscapeportrait 
阅读更多

    为了应对移动设备屏幕的碎片化，我们在开发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开发基础之三————由按键想到 ...
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics