時間: 2016-08-16 00:55:24
作者: zhongxia
地址：
說明：

1. 如果橫豎屏切換只是替換樣式， 請用第4種，
2. 如果橫豎屏切換， 需要執行某些方法，最簡單粗暴的就使用 第5種方式。【小米4c,微信瀏覽器，小米瀏覽器，360瀏覽器親測沒有問題】
3. 使用resize會存在一個問題， 在移動端彈出輸入法輸入框之后，會觸發resize ，底部有解決方案

溫馨提示:
1、如果移動端所有瀏覽器都失效，請檢查手機屏幕旋轉是否開啟；
2、如果只有微信旋轉失效，而在瀏覽器中打開正常，請打開微信的【開啟橫屏模式】；
3、如果以上兩條都無法解決，請檢查人品。

移動端判斷橫豎屏切換，主要的五種方式

1. 瀏覽器自帶事件 orientationchange

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. CSS樣式的

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

3. 定時器判斷頁面寬高

 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. 方法1 和 2 兩種的結合， 因為1 存在兼容性問題，比如微信瀏覽器不觸發， 那么就可以用定時器，判斷CSS。

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

})();

5. 最簡單粗暴的 onresize 事件【注意，不能加載 document 或者 body 上】，**必須加在 window對象上**  ，因為 body 和 document 的大小可能因為HTML內容而變化， 這樣會造成不必要的觸發。 

$(window).on('resize', function () {
fn_onResize();
})

> 移動端 input textarea 輸入會彈出 輸入法的框， 會觸發 resize 方法. 那么如果橫豎屏切換的時候，使用resize方法， 會有問題。 那么怎么處理呢？ 

$input.on('focus',function(e){
window.INPUTFOCUS = ture; //加一個標識
})

$input.on('blur',function(){
//這里加定時器，主要作用是，因為 移動端輸入法的框縮收之后， 到 觸發 resize， 有 大概 200~300ms 的間隔時間 。
setTimeOut(function(){
window.INPUTFOCUS = false; //清除標識
},500)
})

$(window).on('resize',function(){
if(!window.INPUTFOCUS){
//彈出 輸入法框的時候，不處理
}
})

## 參考文章
1. [微信橫屏問題](http://zakwu.me/2015/06/03/shou-ji-shu-ping-pan-duan-han-shu/)