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 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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
php 正则 过滤html 的超链接
2009/06/02 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
python 正则式使用心得
2009/05/07 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
golang/python实现归并排序实例代码
2020/08/30 Python
毕业生就业意向书
2014/04/01 职场文书
干部鉴定材料
2014/05/18 职场文书
条幅标语大全
2014/06/20 职场文书
大学生找工作求职信
2014/07/09 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书