横竖屏切换，兼容性无解？这几招让你轻松搞定

我刚刚搞定了一个H5项目，需要解决横竖屏切换的问题。我刚开始用了 orientationchange这个侦听方法，但是遇到了一堆兼容性的麻烦，搞得我头晕眼花。最后找到了几个好用的横竖屏检测方法，这里给大家分享一下，希望对你们有帮助~

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

orientationchange事件的兼容性

咱们见到旋转屏幕，脑子里第一念头当然是用orientationchange事件搞定。可问题在于，这种东西在各种设备和浏览器里表现都不咋样，有些设备压根不吃这一套，那咋分辨到底是横向还是纵向？头疼

screen.orientation的兼容性

除了onorientationchange这个方法，我还尝试了通过 screen.orientation 来获取手机屏幕方向。但问题来了，某些浏览器并不支持这一属性，使得有时判断是竖屏还是横屏变得麻烦得很，全乱套了。

通过resize事件实现横竖屏检测

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

我研究了一下怎么解决兼容性问题，发现可以用Resize事件搭配着window.innerWidth跟window.innerHeight来识别设备的朝向。但这方法有点儿瑕疵，因为窗户大小变了也会引发Resize事件，导致天天都要去调试，确实挺费劲的。

对于这问题呐，咱们可以用 setTimeout 延迟回调函数，减轻负担！再说，如果要左右兼顾，给每块屏都注册一个 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媒体查询实现检测

试过才知道，靠CSS3 @media media query就能搞定手机方向问题。基本大多数手机都支持这个功能，只需在网页中添加一段专门判断屏幕方向的CSS样式代码，再用JavaScript将其注入进去即可。

选font-family来当侦探用，主要就是防网页变样子，而且这玩意儿还耐用。咱们给横竖两款都起个名字，再在调整尺寸时，看看那些不同样式的属性就能找到位置。是不是超简单？

模拟orientationchange事件

你知道吗？虽然总有那么几个设备搞不定横竖屏，可别担心，咱还有办法帮你解决。简单说就是，设备能识别orientationchange就直接用它，但是不行的话，咱就试试那几种模拟修正的方法。

搞定横竖屏监控，就得用上自定义订阅与发布模式、CSS3媒体查询妙招儿，还得耍酷模拟修复 orientationchange 事件。这样做才能让咱们的监控小招好看又靠谱！

// 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);
        }
      }
    }
  }();

。