javascript检测移动设备横竖屏


Posted in Javascript onMay 21, 2016

如何判断

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

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

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 #Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 #Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 #Javascript
javascript RegExp 使用说明
May 21 #Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 #Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 #Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 #Javascript
You might like
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
js中判断控件是否存在
2010/08/25 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
详解redux异步操作实践
2018/08/15 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
架构师岗位职责
2013/11/18 职场文书
公司成立感言
2014/01/11 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python