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

前端之家收集整理的这篇文章主要介绍了更靠谱的H5横竖屏检测方法(js代码)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

方案一:

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

orientationchange

event.orientation|screen.orientation.angle

如下是orientationchange事件的兼容性:

如下是screen.orientation的兼容性:

方案二:

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

window.innerHeight)? "landscape":"portrait"; if(oritentation === 'portrait'){ // do something …… } else { // do something else …… } },false);

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

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

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

关键代码如下:

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兼容性:

支持CSS3 media。

实现思路:

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

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

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

这里我选择的节点font-family作为检测样式属性

理由

如下:

选择主要为了避免reflow和repaint

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

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

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

关键代码如下:

添加类 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效果:

landscape效果:

方案四:

可以再改进一下,在支持

orientationchange

时,就使用原生的orientationchange,不支持则使用方案三。

关键代码如下:

方案五:

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

关键代码如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/45904.html

猜你在找的JavaScript相关文章