微信瀏覽器橫屏顯示問題

微信橫屏問題

移動端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、如果以上兩條都無法解決，請檢查人品。