Question

我正在尝试创建一个带有页眉和页脚的jquerymobile网站，以便在移动环境中一致地呈现，但出于某种原因，当我在一个Android网络设备上测试它时，身体在方向改变后延伸出来并且没有之后渲染相同。

任何想法可能导致它或如何解决它？我试图隐藏溢出，甚至玩页面数据角色的高度/宽度，但似乎没有任何工作。此问题不会出现在任何iOS设备上，只会出现在Android设备上。

可以找到一个工作示例here

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0;">
<meta name="viewport" content="user-scalable=YES">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<script type="text/javascript">

var appleHeightOffset = 60;
var orientation = window.orientation;
var oMod = (parseInt(orientation)/90);

function isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone)/) && navigator.userAgent.match(/AppleWebKit/);
}

$(document).on('pageinit',function() {
    if ( oMod == 1 || oMod == -1 ){
        renderLandscape($(window).height(),$(window).width());
    }else if( oMod == 0 || oMod == 2 ){
        renderPortrait($(window).height(),$(window).width());
    }

});

    function renderPortrait(height,width){
        $(".ui-page").height(height + "px");
        $(".ui-page").width(width + "px");
        $("body").css("overflow", "hidden");
        $("body").css("background-color", "Red");
        $("#mainpage").css("background-color", "Aquamarine");
        $("#mainHeader").css("background-color", "Brown");
        $("#mainContent").css("background-color", "DarkGreen");
        $("#mainFooter").css("background-color", "Gold");       

        $("#mainFooter, #mainHeader, #mainContent").width(width + "px");   
        $("#mainHeader").height( (width / 9) + "px");
        $("#mainFooter").height( (width / 6) + "px");

        var contentHeight = height - ($("#mainHeader").height() + $("#mainFooter").height());   
        if (isMobileSafari()) { 
            contentHeight += appleHeightOffset;
        }
        $("#mainContent").height(contentHeight);
    }


    function renderLandscape(height,width){
        $(".ui-page").height(height + "px");
        $(".ui-page").width(width + "px");
        $("body").css("overflow", "hidden");
        $("body").css("background-color", "Red");
        $("#mainpage").css("background-color", "Aquamarine");
        $("#mainHeader").css("background-color", "Brown");
        $("#mainContent").css("background-color", "DarkGreen");
        $("#mainFooter").css("background-color", "Gold");       

        $("#mainFooter, #mainHeader, #mainContent").width(width + "px");
        $("#mainHeader").height( (height / 6) + "px");
        $("#mainFooter").height( (height / 4) + "px");

        var contentHeight = height - ($("#mainHeader").height() + $("#mainFooter").height());   
        if (isMobileSafari()) { 
            contentHeight += appleHeightOffset;
        }
        $("#mainContent").height(contentHeight);
    }

    function hideAddressBar(){
        if(!window.location.hash){
            if(document.height < window.outerHeight){
                document.body.style.height = (window.outerHeight + 50) + 'px';
            }
            setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
        }
    }

    $(window).bind('orientationchange', function(e){
        hideAddressBar();
        setTimeout(function(){
            window.scrollTo(0,1);
            var oMod = (parseInt(window.orientation)/90);
            var height = $(window).height();
            var width = $(window).width();      

            if ( oMod == 1 || oMod == -1 ){
                renderLandscape(height,width);
            }else if( oMod == 0 || oMod == 2 ){
                renderPortrait(height,width);
            }
        },500);
    });

    function findNearest() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(positionNearest, positionError);
        } else {
            positionError(-1);
        }
    }

</script>
</head>

<body>
<div data-role="page" id="mainpage">
    <div data-role="header" id="mainHeader">
    </div>
    <div data-role="content" id="mainContent">
    </div>
    <div data-role="footer" id="mainFooter">
    </div>
</div>
</body>
</html>

Android移动浏览器上的Jquery Mobile机身/高度渲染不一致

0 个答案: