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

Mobile Web开发 处理设备的横竖屏的更多相关文章

  1. 开发库比较(3) - Mobile Web 开发 - Sencha, jquerymobiel, phonejs, jqtouch, jqmobi

    我们一直坚信Html/css在界面上最终会一统江湖,因为在众多的界面编写中,qt,gtk,wpf,win form, wxwidgets等等,只有Html/CSS是真正拥有统一标准,只有这个有潜力作用 ...

  2. iOS开发之判断横竖屏切换

    /** *  当屏幕即将旋转的时候调用 * *  @param toInterfaceOrientation 旋转完毕后的最终方向 *  @param duration  旋转动画所花费的时间 */ ...

  3. 前端小记4——高性能mobile web开发

    1.高性能CSS3动画 与PC端场景需要相比,移动web端需要考虑的因素也相对复杂,重点考虑:流量.功耗与流畅度.在pc端上考虑更多的是流畅度,而mobile web中需要考虑网络流量的使用和耗电情况 ...

  4. （一〇八）iPad开发之横竖屏适配

    在iPad开发中,横竖屏的视图常常是不同的,例如侧边栏Dock,在横屏时用于屏幕较宽,可以展示足够多的内容,每个按钮都可以展示出标题:而竖屏时Dock应该比较窄,只显示图标不现实按钮标题. iPad比 ...

  5. 转载：移动web开发规范

    本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...

  6. 移动Web开发实践

    移动设备的高速发展给用户带来了非常大的便利.用户使用Android.iPhone和其他移动设备非常easy接入互联网. 移动设备对网页的性能要求比較高.以下就说说Mobile Web开发的一些心得. ...

  7. Activity 在横竖屏切换情况下的生命周期变化

    title: Activity 在横竖屏切换情况下的生命周期变化 date: 2018-04-26 23:05:57 tags: [Activity] categories: [Mobile,Andr ...

  8. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

  9. 基于zepto判断mobile的横竖屏状态

    借用jquery mobile中的代码,删除了一些多余的部分,简单的基于zepto的模块 var CheckOrientation = (function(){ var win = $( window ...

随机推荐

  1. 对中级Linux 用户非常有用的20 个命令

    也许你已经发现第一篇文章非常的有用,这篇文章是继对初级Linux用户非常有用的20个命令的一个延伸. 第一篇文章的目的是为新手准备的而这篇文章则是为了Linux的中高级用户.在这里你将学会如何进行自定 ...

  2. PHP 9 大缓存技术总结

    1.全页面静态化缓存 也就是将页面全部生成html静态页面,用户访问时直接访问的静态页面,而不会去走php服务器解析的流程.此种方式,在CMS系统中比较常见,比如dedecms: 一种比较常用的实现方 ...

  3. Unity 3D 进度条制作

    我们都知道玩游戏时,第一步要加载游戏,加载游戏时我们可以做一个简单的进度条来显示游戏加载进度,应为有了进度条,游戏画面不会过于呆板. 那么我们就开始游戏的进度条制作吧! 方法一: 1,使用NGUI制作 ...

  4. visual studio 2010 C语言声明异常

    如下这段程序,是C_Primer_plus_第五版内的一个复习题答案(感觉声明i的值有问题),在GCC上面可以运行,但是移植到VS2010就一堆错误, #include<stdio.h> ...

  5. Android显示系统设计框架介绍

    1. Linux内核提供了统一的framebuffer显示驱动,设备节点/dev/graphics/fb*或者/dev/fb*,以fb0表示第一个显示屏,当前实现中只用到了一个显示屏. 2. Andr ...

  6. 二、Mp3帧分析（标签帧）

    Mp3文件由帧组成,帧分成标签帧和数据帧,本文就Mp3文件的帧进行分析. 一.标签帧 MP3帧头中除了存储一些象private.copyright.original的简单音乐说明信息以外,没有考虑存放 ...

  7. ASP.NET在实际开发中验证码的用法

    在网上有看到很多关于验证码的代码,很多都只是生成一张验证码图片,然而在实际登陆验证模块,验证码要怎么添加进去或者说怎么运用.和实际项目开发中要怎么使用验证码,我自己总结了几点. 一.在实际开发登陆模块 ...

  8. 大数值基础、for与while循环的简单对比

  9. Spring 之 注解详解

    概述 注释配置相对于 XML 配置具有很多的优势: 它可以充分利用 Java 的反射机制获取类结构信息,这些信息可以有效减少配置的工作.如使用 JPA 注释配置 ORM 映射时,我们就不需要指定 PO ...

  10. Linux下MySql出现#1036 – Table ‘ ‘ is read only 错误解决方法

    本文为转载内容,感谢原作者.原文出自:http://zhaoxiaoru39.blog.163.com/blog/static/609552192012511104730115/ 我遇到的问题是:在n ...