微通道横屏的问题

移动端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的小站

版权声明：本文博主原创文章，博客，未经同意不得转载。