頁面呈現在無序從橫向切換到縱向後在ios 9

Question

我在CSS中設置div的寬度爲100％，它在肖像模式下初始確定。我將iphone旋轉到橫向模式，然後切換到縱向模式。很遺憾該頁面渲染混亂，似乎該div是縮小。問題頁面顯示如下：

該頁面包含兩個部分，圖像區域的寬度和高度通過JavaScript設置，吹圖像是我前面提到的div，它似乎從風景到肖像mode.I已經把頭上的meta標籤viewport，被設置爲

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 

Answer 1

我想我已經找到答案，這question.Because我的代碼是如此複雜，我把它簡化爲：

<div class="wrapMv clearfix" id="playArea"> 
    <div class="mv" id="playerContainer"> 
     <div class="mvPlayer" id="mvPlayer"> 
      <!--<video id="player" src="" autoplay controls></video>--> 
      <div id="posterImgDiv" class="poster-img-div"> 
       <img id="postImg" class="poster-img" src=""> 
      </div> 
     </div> 

    </div> 
</div> 
<div id="main" class="main clearfix"> 
    <div style="height: 10px;"></div> 
    <div id="sayContent" class="sayContent"> 
     <h3>大家都在說</h3> 
     <ul id="chatArea"> 
     </ul> 
    </div> 

</div> 

thi s是html代碼。

var player = { 
    init : function() { 
     var ua = navigator.userAgent.toLowerCase(); 
     this.isIos = (/(iphone|ipad|ipod)/i).test(ua); 
     if (this.isIos) { 
      this.iosVersion = this._getIOSVersion(ua); 
     } 
     this.canUseNativeFullApi = (/(qqbrowser|ucbrowser|micromessenger)/i).test(ua); 
     this.isModenBrowser = this.isIos | this.canUseNativeFullApi; 
     this._initPlayerDom(); 
    }, 
    _getIOSVersion : function (ua) { 
     if (/cpu (?:iphone)?os (\d+_\d+)/.test(ua)){ 
      return parseFloat(RegExp.$1.replace("_", ".")); 
     } else { 
      return 2; 
     } 
    }, 
    _orientationChangeHandler : function() { 
     var self = this; 
     setTimeout(function() { 
      var isLandscape = false; 
      if (window.orientation == 180 || window.orientation== 0) { 
       $('body').removeClass('landscape'); 
       window.scrollTo(0, 0);console.log('豎屏');//// 
      } else if(window.orientation == 90 || window.orientation == -90) {//橫屏 
       $('body').addClass('landscape'); 
       isLandscape = true; 
      } 

      self.resizePlayer(isLandscape,true);// 
     }, 300); 
    }, 
    _addOrientationListener : function() { 
     var self = this; 

     if (this.isModenBrowser) {console.log('use orientationchange'); 
      window.addEventListener('orientationchange', function(){ 
       self._orientationChangeHandler(); 
      }); 
     } else {console.log('use resize event'); 
      $(window).resize(function() { 
       self._orientationChangeHandler(); 
      }); 
     } 
    }, 
    _initPlayerDom : function() { 
     this._addOrientationListener(); 
     var $player; 
     $('#mvPlayer').append('<video x-webkit-airplay="allow" webkit-playsinline id="player" ></video>'); 
     $player = $('#player');     
     this.$player = $player; 
    }, 
    resizePlayer : function(isLandscape,noNeedResizeChatContent) { 
     var self = this; 
     var currentInnerHeight = window.innerHeight; 
     var playerWidth = window.innerWidth; 

     var playerHeight = playerWidth * 9/16; 
     if (playerHeight > currentInnerHeight) { 
      playerWidth = currentInnerHeight * 16/9; 
      playerHeight = currentInnerHeight; 
     } 

     setTimeout(function() { 
      $('#playerContainer').height(playerHeight).width(playerWidth); 
      $('#player').height(playerHeight).width(playerWidth); 
     },10); 
    } 
}; 

這是js代碼。這個問題的關鍵是隱藏在resizePlayer的函數中。讓我們看看代碼var playerWidth = window.innerWidth;和$('#player').height(playerHeight).width(playerWidth);，當你旋轉你的iphone時，視頻的高度和寬度將被重新計算。當我通過weinre調試我的頁面後，發現從橫向切換到縱向時，從ios9戰爭中獲得的值爲window.innderWidth錯誤並始終大於事實價值。 風格在CSS設置：

.mv{ 
    margin: 0 auto; 
    width: 100%; 
} 
.mvPlayer{ 
    margin: 0 auto; 
    width: 100%; 
} 
.main{ 
    overflow-y: scroll; 
    width: 100%; 
    height: auto; 
    display: inline-block; 
} 

最後，我解決疑難問題添加樣式在CSS：

.mvPlayer video { 
    width: 100%; 
} 

而且沒有設置播放器的寬度在javascript：

$('#playerContainer').height(playerHeight); 
$('#player').height(playerHeight);