不久前，我做了一个H5项目，需要在水平和垂直屏幕改变时处理。毫无疑问，需要使用orientationchange来监控水平和垂直屏幕的变化。

方案1:

//收听方向更改窗口。addeventlistener('方位变化'，函数(事件){//根据事件判断横竖屏。方向|屏幕。orientation.angle等于0|180，90|-90度}，false)；添加代码后，会出现各种兼容性问题。兼容性问题出现在两个地方：

方向改变

事件。方向|屏幕。orientation.angle是orientationchange事件的兼容性，如下所示：

以下是screen.orientation的兼容性：

方案二：

以上方案行不通，我们得另想办法。谷歌一下，了解一下可以通过大小调整合作来实现(window.inner/outerWidth，window.inner/outerHeight):

window . addeventlistener(' resize '，function(event){ var orientation=(window . inner width window . inner height)？风景' : '人像'；if(orientation==='人像'){//做点别的……} {//做点别的……}}，false)；该方案基本满足了大多数项目的需求，但仍存在一些不足：

只要窗口的大小改变，调整大小事件就会被连续触发。您可以使用setTimeout来优化它

如果有多个地方需要监控水平和垂直屏幕，则需要注册多个窗口。addeventlisteners ('resize '，function (event) {…})。我们是否可以通过只注册一个resize来监控水平和垂直屏幕的变化，并在水平和垂直屏幕变化时发布通知订阅的对象来改进订阅和发布模式？其他需要监控横竖屏的地方只需要订阅即可。

关键代码如下：

Varresize CB=function () {if (win。内宽绕组。inner height){//初始化判断meta.init=' landscapemeta.current=“横向”；} else { meta.init='人像'；meta.current='纵向'；} return function(){ if(win . inner width win . inner height){ if(meta . current！=='横向'){ meta.current='横向'；event . trigger(' _ _ orientionchange _ _ '，meta)；} } else { if(meta.current！=='纵向'){ meta.current='纵向'；event . trigger(' _ _ orientionchange _ _ '，meta)；} } } }();这里有完整的代码

方案3:

但是我个人认为window . inner width window . inner height的实现是一种误检，有点不靠谱。可以通过浏览器实现检测吗？例如基于[emailprotected]媒体查询。

以下@媒体兼容性：

如上图所示，所有手机浏览器都支持CSS3媒体。

实施思路：

创建包含水平和垂直屏幕状态的特定css样式

通过JS将CSS代码注入到页面中

调整回调函数的大小以获得水平和垂直屏幕的状态

这里，我选择html/html节点font-family作为检测样式属性。原因如下：

Html/html主要是为了避免回流和重画而选择的

选择字体系列样式，主要是因为字体系列具有以下特点：

优先考虑前面的字体。如果找不到字体或字体不包含要呈现的文本，将使用下一种字体。如果列出的字体都不能满足需要，就让操作系统决定使用哪种字体。这样，我们可以指定一个特定的徽标来标识横屏和竖屏的状态，但是我们需要将指定的徽标放在其他字体的前面，这样hmtl字体就不会改变。

关键代码如下：

//回调var resizeCB=function(){ var hs tyle=win。getcomputedstyle(html，null)，ffstr=hs style[' font-family ']，pstr='纵向，ffstr，lstr='横向，ffstr，//拼接CSS CSS str=' @ media(方向：人像){。方位{ font-family : ' pstr} } @media(方向：横向){。方位{ font-family : ' lstr}}';//载入样式loadStyleString(CSS字符串)；//添加类html。类名=“方向”html。类名；if(hs tyl[' font-family ']===pstr){//初始化判断meta.init='纵向；meta.current='纵向；} else { meta . init=' landscape meta . current="横向";} return function(){ if(hs tyle[' font-family ']==pstr){ if(meta。电流！=='纵向){ meta.current='纵向；事件。trigger(' _ _ orientionchange _ _ '，meta)；} } else { if (meta.current！=='横向){ meta.current='横向；事件。trigger(' _ _ orientionchange _ _ '，meta)；} } } }();完整代码猛击这里

测试效果

肖像效果：

风景效果：

方案四：

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

关键代码如下：

//是否支持方向改变事件var isOrientation=(窗口中的“方向”和窗口中的论方位变化’)；//callbackvar orientioncb=function(e){ if(win。方位===180 | |赢。orientation===0){ meta。' init='人像；meta.current='纵向；}如果(赢了。方位===90 | |赢。orientation====-90){ meta。' init='横向；meta.current="横向";} return函数(){ if(win。方位===180 | |赢。orientation===0){ meta。当前='人像；}如果(赢了。方位===90 | |赢。orientation====-90){ meta。当前='横向'；} event.trigger(eventType，meta)；}};定义变量回调=isOrientation？orientioncb():(function(){ resizeCB()；return function(){ timer win。cleartime out(计时器);timer=win.setTimeout(resizeCB，300)；}})();//监听赢了。addeventlistener(八音？事件类型： '调整大小'，回调，假)；完整代码猛击这里

方案五：

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

关键代码如下：

var事件类型=“方向改变”；//触发原生orientionchangevar fire=function(){ var e；if(文档。createevent){ e=document。create event(' HTMleEvents ')；e.initEvent(eventType，true，false)；赢了。dispatchevent(e)；} else { e=document。createeventobject()；e .事件类型=事件类型；if(win[事件类型]){ win[事件类型]()；} else if(win[' on ' event type]){ win[' on ' event type]()；} else { win.fireEvent(eventType，e)；} }}完整代码猛击这里

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。