the page render in disorder after switching from landscape to portrait in ios 9

Question

i set a div's width 100% in css, it initial ok in portrait mode.i rotate my iphone to landscape mode , and then switch to portrait mode.unfortunately the page render in disorder,it appear that the div is zoom out. The problem page is showed as follow:

The page contains two parts, the image area's width and height are set via JavaScript, blow the image is the div i mentioned before, it seems zoom out after roating from landscape to portrait mode.I have put the meta tag viewport in head ,which is set as

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

Answer 1

I think i have find the answer to this question.Because my code is so complex, i simplify it as follows:

<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>

this is the html code.

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

This is the js code.The key point of this problem is hide in the function of resizePlayer. Let see the code var playerWidth = window.innerWidth; and $('#player').height(playerHeight).width(playerWidth);,when you rotate your iphone ,the video's height and width will be recumputed.After I debug my page via weinre, i found that when switch from landscape to portrait,the value of window.innderWidth got from ios9 war wrong and always bigger than factual value. The style set in css :

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

Finally ,i resolved the problem.I add a style in css:

.mvPlayer video {
    width: 100%;
}

And not set the width of the player in javascript：

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