你懂得 发表于 2013-7-5 19:35:09

html5屏幕旋转事件,html5如何实现屏幕旋转

html5屏幕旋转事件 onorientationchange

很多用html5开发移动应用的童鞋不知道怎么实现监听屏幕旋转,下面为大家介绍html5如何实现屏幕旋转

添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。
例子:

// 判断屏幕是否旋转4. 屏幕旋转事件:onorientationchange

添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。例子:

// 判断屏幕是否旋转

function orientationChange() {

    switch(window.orientation) {

      case 0:

            alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);

            break;

      case -90:

            alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);

            break;

      case 90:   

            alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);

            break;

      case 180:   

        alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);

        break;

    };<br>};

// 添加事件监听

addEventListener('load', function(){

    orientationChange();

    window.onorientationchange = orientationChange;

});

你懂得 发表于 2013-7-5 19:43:16

我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。window.orientation属性与onorientationchange事件   

window.orientation :这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式

onorientationchange : 在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似1:使用onorientationchange事件的回调函数,来动态地为body标签添加一个叫orient的属性,同时以body或body的方式在css中定义对应的样式,这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例:
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">
                body{
                  background-color: #ff0000;
                }
      
                body{
                  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的属性选择器来实现,如下代码的实现方案:
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>
      </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就实现了对应的功能,如下代码演示:
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">
                @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)之比,从而判定当前的横竖屏状态。如下代码所示:
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 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>统一解决方案

将以上的两种解决方案整合在一起,就可以实现一个跨浏览器的解决方案,如下代码:
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>

uqobk8216 发表于 2013-9-27 15:44:53

小手一抖,钱钱到手!

befairyliu 发表于 2014-2-21 10:24:42

小手一抖,钱钱到手!

979036 发表于 2015-4-29 16:03:05

好东西,值得收藏

csstop 发表于 2015-9-17 16:10:37

有用,收下了先!

czh 发表于 2016-3-24 21:36:53

这是检测移动端页面是否横屏或者竖屏,另外,我想问一下,是否能够强行将一个手机页面打开就横屏显示?希望有大牛能够指点指点,十分感谢。

Sogrey 发表于 2016-6-2 11:32:35

你懂得 发表于 2013-7-5 19:43
我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。1:使用o ...

不得不给楼主一个大大的赞

Sogrey 发表于 2016-6-2 11:33:14

不得不给楼主一个大大的赞,太受益

FeeLinear 发表于 2016-8-10 22:00:26

mark一下
页: [1] 2
查看完整版本: html5屏幕旋转事件,html5如何实现屏幕旋转