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

https://github.com/zuopf769/notebook/tree/master/fe/js%E5%AE%9E%E7%8E%B0%E6%89%8B%E6%9C%BA%E6%A8%AA%E7%AB%96%E5%B1%8F%E4%BA%8B%E4%BB%B6

方案1 orientationchange事件

orientationchange事件在低端的adroid机器上存在兼容性问题，可能不会触发

方案2 resize配合(window.inner/outerWidth, window.inner/outerHeight)

缺点

只要的变化，就会不断触发触发事件。可以使用来优化一下 如果有多个地方需要监听横竖屏，就需要注册多个。

能不能通过订阅与发布模式来改进一下，只注册一个resize负责监听横竖屏变化，只要横竖发生变化就发布通知订阅的对象。其他需要监听横竖屏的地方只需订阅一下即可。

关键代码如下：

代码

完整代码

改进方案1

基于CSS3@media媒体查询检测来实现

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

实现思路：

• 创建包含标识横竖屏状态的特定css样式
• 通过JS向页面中注入CSS代码
• resize回调函数中获取横竖屏的状态

这里选择的节点font-family作为检测样式属性。 理由如下：

1. 选择主要为了避免reflow和repaint
   
2. 选择font-family样式，主要是因为font-family有如下特性：
       优先使用排在前面的字体。
       如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
       如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。 这样我们就可以指定特定标识来标识横竖屏的状态，不过需要将指定的标识放置在其他字体的前面，这样就不会引起hmtl字体的变化。

代码

完整代码

改进方案2

可以再改进一下，在支持orientationchange时，就使用原生的orientationchange，不支持则使用上面方案

完整代码

代码

改进方案3

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

代码

完整代码

方案3 matchMedia

css3为我们提供了很强大的media query，而我们时常需要在js中动态的知道什么时候某个状态满足了。CSS Object Model（CSSOM）Views规范增加了对Javascript操作CSS media query的原生支持，它在window对象下增加了matchMedia()方法。

MediaQueryList对象

你可以传入一个CSS media query然后返回一个MediaQueryList对象。这个对象包括两个属性：matches，布尔值数据，表示CSS media query是否与当前的显示状态匹配；media对应传入的参数字符串。如下：

MediaQueryList对象监听器

当视图状态发生改变时，监听器对应的函数就会执行，而对应的MediaQueryList对象也会传入。用这个方式吗，你可以让你的Javascript可以很快地响应布局变化，并且不需要用轮询的方式。另外关于media query的实现原理一直不太清楚，什么时候media query就生效的，比如说转屏，是否是只要当前屏幕width或height发生改变时就去查询media query估计就待看看webkit源码才能清楚了。

原生的matchMedia有些问题; GMU在遵照CSS Object Model（CSSOM）Views规范，在zepto基础上扩展实现了$.matchMedia方法，该方法返回一个对象，该对象包含matches（是否match query），当前查询query, addListener和removeListener，调用方式与原生window.matchMedia一致。

具体思路：

（1）为页面添加检测元素

css media query主要还是在style上起作用，故在页面创建一个div，作为media query作用的对象。

（2）为检测元素添加transition样式及media query样式

当query条件满足时，去动态修改transition作用的属性，如(width)，则可触发transitionEnd事件，这样则相当于可以监测到media query。

注意下这里的query:一开始加载页面成功后为

一开始检测元素的宽度为0，mediaQuery加载后就为1了，触发了transition动画，当有竖屏转为横屏时，mediaQuery条件就不符合了，检测元素的宽度又变回到了0，所以又会触发transition动画

注册transitionEnd事件

封装addListener及removeListener接口

主要记录在闭包中的listeners数组件，添加和删除回调函数即可

用$.mediaQuery实现转屏ortchange事件

实现转屏，只需将query传入检测转屏的query即可。这里在实现时，最开始遇了一点问题。最开始query值为"screen and (orientation: portrait)"，可在某个三星的机器上测试，居然键盘出来会改变视口大小，即认为是orientation改变了。后来经测试后query换成了"screen and (width: " + window.innerWidth + "px)"，即检测设备第一次打开时的width，若转屏后width必然不满足，使得页面上的检测元素width未受media query的css影响而改变而触发transitionEnd。具体代码如下：

使用方法

总结

• 原生的orientationchange事件低端手机不支持

• 对于不支持orientationchange的机型和系统，我们就只能借助于resize来触发，大家知道resize在很多情况下都会触发，而不光只有转屏，因此并不是很准。

•     以上就是本篇文章【js实现手机横竖屏事件】的全部内容了，欢迎阅览 ！ 文章地址：http://fabua.ksxb.net/news/4922.html 
       文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 海之东岸资讯移动站 http://fabua.ksxb.net/mobile/ , 查看更多