脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js检测移动设备横竖屏

javascript检测移动设备横竖屏

 更新时间：2016年05月21日 15:29:37   作者：xbf321  
移动端的开发过程中，免不了要判断横竖屏，然后在执行其他操作，比如分别加载不同样式，横屏显示某些内容，竖屏显示其他内容等等。

如何判断

移动设备提供了两个对象，一个属性，一个事件：

（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属性判断当前是横屏还是竖屏，以便执行不同的操作。

您可能感兴趣的文章:

相关文章

  • js添加千分位的实现代码(超简单)

    js添加千分位的实现代码(超简单)

    下面小编就为大家带来一篇js添加千分位的实现代码(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 上传的js验证(图片/文件的扩展名)

    上传的js验证(图片/文件的扩展名)

    下文给大家介绍下js 验证上传图片以及怎样控制一个上传文件的扩展名，感兴趣的朋友可以参考下哈，希望对你有所帮助
    2013-04-04
  • JS实现多物体运动

    JS实现多物体运动

    这篇文章主要为大家详细介绍了JS实现多物体运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • js实现网页五子棋进阶版

    js实现网页五子棋进阶版

    这篇文章主要为大家详细介绍了js实现网页五子棋进阶版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • html+javascript+bootstrap实现层级多选框全层全选和多选功能

    html+javascript+bootstrap实现层级多选框全层全选和多选功能

    想做一个先按层级排序并可以多选的功能，首先倾向于用多层标签式的，直接选定加在文本域里，接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能，需要的朋友参考下
    2017-03-03
  • 利用JavaScript实现静态图片局部流动效果

    利用JavaScript实现静态图片局部流动效果

    如果你有玩过《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，本文将利用JavaScript实现这一效果，需要的可以参考一下
    2022-08-08
  • B/S模式项目中常用的javascript汇总

    B/S模式项目中常用的javascript汇总

    本篇文章是对B/S模式项目中常用的javascript进行了汇总介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 微信小程序三级联动选择器使用方法

    微信小程序三级联动选择器使用方法

    这篇文章主要为大家详细介绍了微信小程序三级联动选择器使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-02-02
  • JS实现加载和读取XML文件的方法详解

    JS实现加载和读取XML文件的方法详解

    这篇文章主要介绍了JS实现加载和读取XML文件的方法,结合实例形式分析了javascript针对xml文件的加载与读取相关实现步骤与操作技巧,需要的朋友可以参考下
    2017-04-04
  • cocos2dx骨骼动画Armature源码剖析(二)

    cocos2dx骨骼动画Armature源码剖析(二)

    本篇主要给大家介绍cocos2dx骨骼动画Armature源码剖析之flash中数据与xml中数据关系，需要的朋友一起来学习吧
    2015-09-09

最新评论