网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 javascript检测移动设备横竖屏
内容
    移动端的开发过程中，免不了要判断横竖屏，然后在执行其他操作，比如分别加载不同样式，横屏显示某些内容，竖屏显示其他内容等等。
    如何判断
    移动设备提供了两个对象，一个属性，一个事件：
    （1）window.orientation   属于window对象上一个属性；共有三个值 ：0为竖屏模式（portrait）,90为向左反转变为横屏模式（landscape），-90为向右反转变为横屏模式（landscape），最后180就是设备上下互换还是竖屏模式。
    （2）orientationchange     是一个event，在设备旋转时，会触发此事件，如同PC上使用的resize事件。
    这两个搭配起来使用，很容易就能获得设备的横竖屏状态，代码如下：
    (function(){
     var init = function(){
      var updateOrientation = function(){
       var orientation = window.orientation;
       switch(orientation){
        case 90:
        case -90:
         orientation = 'landscape';
         break;
        default:
         orientation = 'portrait';
         break;
       }
       //do something
       //比如在html标签加一个状态
       //然后根据不同状态，显示不同大小
       document.body.parentNode.setAttribute('class',orientation);
      };
      window.addEventListener('orientationchange',updateOrientation,false);
      updateOrientation();
     };
     window.addEventListener('DOMContentLoaded',init,false);
    })();
    在css中就可以这样写：
    /**竖屏 div边框显示蓝色**/
    .portrait body div{
     border:1px solid blue;
    }
    /**竖屏 div边框显示黄色**/
    .landscape body div{
     border:1px solid yellow;
    }
    当然还可以使用media queries的方式（推荐这种）：
    @media all and (orientation: portrait) {
     body div {
     border:1px solid blue;
     }
    }
    @media all and (orientation: landscape) {
     body div {
     border:1px solid yellow;
     }
    }
    兼容性
    如果window.orientation或者orientationchange在设备中不存在的情况怎么处理呢？（一般一个不存在，另一个也不存在，反之）
    在前期开发中，经常会用Chrome的device model调式，但是这个属性确实不存在，哪怎么获得这个值呢？简单的方式就是依据宽和高的大小比较判断，宽小于高为竖屏，宽大与高就是横屏。
    获得结果的方式知道了，接下来就是怎么监听设备反转事件了，既然orientationchange不可用，就使用最基本的resize事件或者使用定时器检测，还是看代码：
    (function(){
     var updateOrientation = function(){
      var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
      document.body.parentNode.setAttribute('class',orientation);
     };
     var init = function(){
      updateOrientation();
      //每5秒检查一次
      //window.setInterval(updateOrientation,5000);
      //监听resize事件
      window.addEventListener('resize',updateOrientation,false);
     };
     window.addEventListener('DOMContentLoaded',init,false);
    })();
    最后，把以上两种方式合起来，就是一个完整的检测解决方案
    (function(){
     var supportOrientation = (typeof window.orientation === 'number' &&
       typeof window.onorientationchange === 'object');
     var init = function(){
      var htmlNode = document.body.parentNode,
       orientation;
      var updateOrientation = function(){
       if(supportOrientation){
        orientation = window.orientation;
        switch(orientation){
         case 90:
         case -90:
          orientation = 'landscape';
          break;
         default:
          orientation = 'portrait';
          break;
        }
       }else{
        orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
       }
       htmlNode.setAttribute('class',orientation);
      };
      if(supportOrientation){
       window.addEventListener('orientationchange',updateOrientation,false);
      }else{
       //监听resize事件
       window.addEventListener('resize',updateOrientation,false);
      }
      updateOrientation();
     };
     window.addEventListener('DOMContentLoaded',init,false);
    })();
    总结:
    通过orientationchange事件来监听设备是否旋转，配合window.orientation属性判断当前是横屏还是竖屏，以便执行不同的操作。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 21:48:52