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 相关文章推荐
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
JS简单表单验证功能完整示例
Jan 26 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
mysql 字段类型说明
2007/04/27 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP中PDO的错误处理
2011/09/04 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python科学画图代码分享
2017/11/29 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
应届生求职信
2014/05/31 职场文书
教书育人演讲稿
2014/09/11 职场文书
旗帜观后感
2015/06/08 职场文书
运动会主持词大全
2015/07/02 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书