在iOS9中将页面从横向切换到纵向后，页面呈现混乱

Question

我在css中设置了一个div的宽度为100%，它最初在纵向模式下是可以的。我将iphone旋转到横向模式，然后切换到纵向mode.unfortunately，页面呈现混乱，看起来这个div是缩小的。问题页面如下所示：

页面包含两个部分，图像区域的宽度和高度都是通过JavaScript设置的，blow图像是我之前提到的div，从横向到纵向模式旋转后似乎会缩小。我在head中放置了元标签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>

这是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);
    }
};

这个问题的关键点是隐藏在resizePlayer函数中的js code.The。让我们看看代码var playerWidth = window.innerWidth;和$('#player').height(playerHeight).width(playerWidth);，当你旋转你的iphone时，视频的高度和宽度将是recumputed.After我通过weinre调试我的页面，我发现当从横向切换到纵向时，window.innderWidth从ios9 war中得到的值是错误的，并且总是大于实际值。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);