微信横屏问题

移动端html开发，我们常会用到横竖屏的判断做一些事情，比如说播放视频的时候时常使用横竖屏切来切换居中显示和全屏显示，如果你无数次尝试都失败了，请你看到最后，有惊喜哦！！。

一般来说，横竖屏的检测方式有以下几种：

一、使用浏览器自带的事件

使用浏览器自带事件orientationchange和浏览器对象window.orientation可以完美进行横竖屏幕切换。根据参考资料一，此事件在有些浏览器中使用绑定在body元素上的属性来实现，只有在页面发生css重排后才会被触发。解决此问题的方法是在body上增加一个css类，用来触发css的重排，具体css代码如下：

.portrait body div { width: 10%; }
.landscape body div { width: 15%; }

调用事件代码如下：

  var updateOrientation = function() {
    var orientation = window.orientation;

    switch(orientation) {
      case 90: case -90:
        orientation = ‘landscape‘;
      break;
      default:
        orientation = ‘portrait‘;
    }

    // set the class on the HTML element (i.e. )
    document.body.parentNode.setAttribute(‘class‘, orientation);
  };

  // event triggered every 90 degrees of rotation
  window.addEventListener(‘orientationchange‘, updateOrientation, false);

2、使用媒体查询（media query）

媒体查询里面中有横竖屏幕的检测，orientation: portrait(竖)/landscape(横)，媒体查询该属性的生效系统版本为：iOS 3.2+, Android 2.0+和一些其他浏览器。
具体代码如下：

@media all and (orientation: portrait) {
  body div { width: 10%; }
}

@media all and (orientation: landscape) {
  body div { width: 15%; }
}

3、使用定时器，定期检测当前页面的长宽

此种方法通过定时检测当前页面的长宽，通过对比长宽，对其进行判断，根据判断结果模拟页面的横竖屏，此方法性能堪忧，主要用于以上1,2均不支持的浏览器或者手机。废话少说，上代码。

    var updateOrientation = function() {
        // landscape when width is biggest, otherwise portrait
        var orientation = (window.innerWidth > window.innerHeight) ? ‘landscape‘: ‘portrait‘;

        // set the class on the HTML element (i.e. )
        document.body.parentNode.setAttribute(‘class‘, orientation);
    };

    // initialize the orientation
    updateOrientation();

    // update every 5 seconds
    setInterval(updateOrientation, 5000);

4、横屏终结版

综上，产生了横屏终结版。代码如下：

  (function(){
    var supportsOrientation = (typeof window.orientation == ‘number‘ && typeof window.onorientationchange == ‘object‘);
    var HTMLNode = document.body.parentNode;
    var updateOrientation = function() {
      // rewrite the function depending on what‘s supported
      if(supportsOrientation) {
        updateOrientation = function() {
          var orientation = window.orientation;

          switch(orientation) {
            case 90: case -90:
              orientation = ‘landscape‘;
            break;
            default:
              orientation = ‘portrait‘;
          }

          // set the class on the HTML element (i.e. )
          HTMLNode.setAttribute(‘class‘, orientation);
        }
      } else {
        updateOrientation = function() {
          // landscape when width is biggest, otherwise portrait
          var orientation = (window.innerWidth > window.innerHeight) ? ‘landscape‘: ‘portrait‘;

          // set the class on the HTML element (i.e. )
          HTMLNode.setAttribute(‘class‘, orientation);
        }
      }

      updateOrientation();
    }
    var init = function() {
      // initialize the orientation
      updateOrientation();

      if(supportsOrientation) {
        window.addEventListener(‘orientationchange‘, updateOrientation, false);
      } else {
        // fallback: update every 5 seconds
        setInterval(updateOrientation, 5000);
      }

    }
    window.addEventListener(‘DOMContentLoaded‘, init, false);
  })();

温馨提示: 1、如果移动端所有浏览器都失效，请检查手机屏幕旋转是否开启；2、如果只有微信旋转失效，而在浏览器中打开正常，请打开微信的【开启横屏模式】；3、如果以上两条都无法解决，请检查人品。

5、参考资料

国外大神移动端研究

更多内容请查看zakwu的小站