页面呈现在无序从横向切换到纵向后在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);