更靠谱的H5横竖屏检测方法(js代码)


Posted in Javascript onSeptember 13, 2016

前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理。毫无疑问,需要使用orientationchange来监听横竖屏的变化。

方案一:

// 监听 orientation changes
window.addEventListener("orientationchange", function(event) {
 // 根据event.orientation|screen.orientation.angle等于0|180、90|-90度来判断横竖屏
}, false);

代码添加上后,就各种兼容性问题。这里兼容性问题出现在两个地方:

orientationchange

event.orientation|screen.orientation.angle

如下是orientationchange事件的兼容性:

更靠谱的H5横竖屏检测方法(js代码)

如下是screen.orientation的兼容性:

更靠谱的H5横竖屏检测方法(js代码)

方案二:

上述方案不行,只能另行他法了。google一下,了解到可以通过resize配合(window.inner/outerWidth, window.inner/outerHeight)来实现:

window.addEventListener("resize", function(event) {
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
if(oritentation === 'portrait'){
// do something ……
} else {
// do something else ……
}
}, false);

这种方案基本满足大部分项目的需求,但是还是有些不足之处:

只要window的size变化,就会不断触发触发resize事件。可以使用setTimeout来优化一下

如果有多个地方需要监听横竖屏,就需要注册多个window.addEventListener("resize", function(event) {……})。能不能通过订阅与发布模式来改进一下,只注册一个resize负责监听横竖屏变化,只要横竖发生变化就发布通知订阅的对象。其他需要监听横竖屏的地方只需订阅一下即可。

关键代码如下:

var resizeCB = function(){
   if(win.innerWidth > win.innerHeight){//初始化判断
    meta.init = 'landscape';
    meta.current = 'landscape';
   } else {
    meta.init = 'portrait';
    meta.current = 'portrait';
   }
   return function(){
    if(win.innerWidth > win.innerHeight){
     if(meta.current !== 'landscape'){
      meta.current = 'landscape';
      event.trigger('__orientationChange__', meta);
     }
    } else {
     if(meta.current !== 'portrait'){
      meta.current = 'portrait';
      event.trigger('__orientationChange__', meta);
     }
    }
   }
  }();

完整代码猛击这里

方案三:

不过个人觉得通过window.innerWidth > window.innerHeight来实现的是一种伪检测,有点不可靠。 可不可以通过浏览器来实现检测?如基于CSS3@media媒体查询来实现。

如下@media兼容性:

更靠谱的H5横竖屏检测方法(js代码)

如上上图所示,移动端浏览器都支持CSS3 media。

实现思路:

创建包含标识横竖屏状态的特定css样式

通过JS向页面中注入CSS代码

resize回调函数中获取横竖屏的状态

这里我选择<html></html>的节点font-family作为检测样式属性。理由如下:

选择<html></html>主要为了避免reflow和repaint

选择font-family样式,主要是因为font-family有如下特性:

  • 优先使用排在前面的字体。
  • 如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。
  • 如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。

这样我们就可以指定特定标识来标识横竖屏的状态,不过需要将指定的标识放置在其他字体的前面,这样就不会引起hmtl字体的变化。

关键代码如下:

// callback
  var resizeCB = function() {
    var hstyle = win.getComputedStyle(html, null),
      ffstr = hstyle['font-family'],
      pstr = "portrait, " + ffstr,
      lstr = "landscape, " + ffstr,
      // 拼接css
      cssstr = '@media (orientation: portrait) { .orientation{font-family:' + pstr + ';} } @media (orientation: landscape) { .orientation{font-family:' + lstr + ';}}';
    // 载入样式    
    loadStyleString(cssstr);
    // 添加类
    html.className = 'orientation' + html.className;
    if (hstyle['font-family'] === pstr) { //初始化判断
      meta.init = 'portrait';
      meta.current = 'portrait';
    } else {
      meta.init = 'landscape';
      meta.current = 'landscape';
    }
    return function() {
      if (hstyle['font-family'] === pstr) {
        if (meta.current !== 'portrait') {
          meta.current = 'portrait';
          event.trigger('__orientationChange__', meta);
        }
      } else {
        if (meta.current !== 'landscape') {
          meta.current = 'landscape';
          event.trigger('__orientationChange__', meta);
        }
      }
    }
  }();

完整代码猛击这里

测试效果

portrait效果:

更靠谱的H5横竖屏检测方法(js代码)

landscape效果:

更靠谱的H5横竖屏检测方法(js代码)

方案四:

可以再改进一下,在支持orientationchange时,就使用原生的orientationchange,不支持则使用方案三。

关键代码如下:

// 是否支持orientationchange事件
var isOrientation = ('orientation' in window && 'onorientationchange' in window);
// callback
var orientationCB = function(e) {
  if (win.orientation === 180 || win.orientation === 0) {
    meta.init = 'portrait';
    meta.current = 'portrait';
  }
  if (win.orientation === 90 || win.orientation === -90) {
    meta.init = 'landscape';
    meta.current = 'landscape';
  }
  return function() {
    if (win.orientation === 180 || win.orientation === 0) {
      meta.current = 'portrait';
    }
    if (win.orientation === 90 || win.orientation === -90) {
      meta.current = 'landscape';
    }
    event.trigger(eventType, meta);
  }
};
var callback = isOrientation ? orientationCB() : (function() {
  resizeCB();
  return function() {
    timer && win.clearTimeout(timer);
    timer = win.setTimeout(resizeCB, 300);
  }
})();
// 监听
win.addEventListener(isOrientation ? eventType : 'resize', callback, false);

完整代码猛击这里

方案五:

目前,上述几种方案都是通过自定制的订阅与发布事件模式来实现的。这里可以基于浏览器的事件机制,来模拟orientationchange。即对orientationchange的不兼容进行修复。

关键代码如下:

var eventType = 'orientationchange';
// 触发原生orientationchange
var fire = function() {
  var e;
  if (document.createEvent) {
    e = document.createEvent('HTMLEvents');
    e.initEvent(eventType, true, false);
    win.dispatchEvent(e);
  } else {
    e = document.createEventObject();
    e.eventType = eventType;
    if (win[eventType]) {
      win[eventType]();
    } else if (win['on' + eventType]) {
      win['on' + eventType]();
    } else {
      win.fireEvent(eventType, e);
    }
  }
}

完整代码猛击这里

通过上述5种方案,自己对移动端横竖屏检测有了更进一步的认识,有些东西只有自己亲身经历过才知道为什么要这么写,自己也把其中缘由记录在文章中,希望对大家有帮助。经过5种方案的演变得到了最终orientationchange-fix,github地址:https://github.com/zhansingsong/orientationchange-fix

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
javascript面向对象编程代码
Dec 19 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
javaScript中的空值和假值
Dec 18 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
JavaScript实现左右滚动电影画布
Feb 06 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 #Javascript
JS实现页面数据无限加载
Sep 13 #Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 #Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 #Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 #Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 #Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 #Javascript
You might like
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP正确配置mysql(apache环境)
2011/08/28 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
python读取Kafka实例
2019/12/23 Python
详解Python中的路径问题
2020/09/02 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
工艺工程师工作职责
2013/11/23 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
应届生自荐书
2014/06/23 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
安全生产标语口号
2015/12/26 职场文书