首页 > 代码库 > html屏幕旋转事件监听

html屏幕旋转事件监听

近期做微信服务号开发,在做图片展示的时候需要横竖屏的检测实现图片大小不同的展示。

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

摘自:http://bbs.phonegap100.com/thread-28-1-1.html

//js 判断屏幕是否旋转

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;});

我们在开发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>