如果想始終橫屏展示給使用者，方法有很多，我也來寫幾種吧：

1.簡單粗暴型：當ipad豎屏的時候，給一個蒙層提示，讓客戶不得不進行橫屏操作

// ipad豎屏適配
    var detectOrient = function() {
      var width = document.documentElement.clientWidth,
          height =  document.documentElement.clientHeight
      if( width >= height ){ 
           $('.ipad_t').hide();    //橫屏--隱藏蒙層
      }
      else{
           $('.ipad_t').show();  //豎屏--彈出蒙層
      }
    }
    window.onresize = detectOrient;
    detectOrient();

備註：這種方式雖然不是太友好，但簡單有效，適當選擇！

2.友好型：當ipad豎屏的時候，對根wrap進行旋轉操作

// ipad豎屏適配
    var detectOrient = function() {
      var width = document.documentElement.clientWidth,
          height =  document.documentElement.clientHeight,
          $wrapper =  document.getElementById("J_wrapper"),
          style = "";
      if( width >= height ){ 
          style += "width:" + width + "px;"; 
          style += "height:" + height + "px;";
          style += "-webkit-transform: rotate(0); transform: rotate(0);";
          style += "-webkit-transform-origin: 0 0;";
          style += "transform-origin: 0 0;";
      }
      else{
          style += "width:" + height + "px;";
          style += "height:" + width + "px;";
          style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
          style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
          style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      $wrapper.style.cssText = style;
    }
    window.onresize = detectOrient;
    detectOrient();

備註：這種方式有個大坑，由於對根wrap使用了transform，所以，如果其子元素用fixed定位的話，會使fixed屬性失效（雖然fixed屬性很頑強，但是一物降一物啊--父元素有transform的時候fixed會失效）

3.這種是最完美的，就是嚴格意義上的適配，兩套CSS，如果是豎屏的話用一套，橫屏的話用另一套

@media screen and (orientation: portrait) {
      /*豎屏 css*/
    }
    @media screen and (orientation: landscape) {
      /*橫屏 css*/
    }

備註：這種開發成本高，但效果最有效