Question

我正在尝试使用JQuery-mobile标头和地图编写一个简单的html页面（使用nokia here map api）。

我希望地图适合整个屏幕，所以我尝试通过获取屏幕高度然后减去标题高度来计算其高度。在尝试获得正确的大小之后，我尝试的每个浏览器的结果都很好，除了在Safari上用于Ipad：使用后者，地图的大小合适，但是如果你触摸标题，页面可以滚动一点，你可以看到大约十个“额外像素”。

这是代码（我省略了加载地图的脚本）：

<div id="home" data-role="page" class="ui-responsive-panel" data-theme="a">
    <div data-role="header" id="header" data-position="fixed" data-theme="b">
        <h3>HEADER</h3>
    </div>

    <div data-role="content">
        <div class="ui-grid-solo" id="map">
        <div class="ui-block-a" id="bigMapContainer">   
        </div>
        </div> 
    </div>
</div>


$(window).resize(function (){

    var maxWidth = $(window).width();
    var maxHeight = $.mobile.getScreenHeight();

    var headerHeight = $('#header').outerHeight(true);
    var mapHeight = maxHeight - headerHeight;
    $('#map').css("height",mapHeight);

});

$(document).ready(function () {

    var maxWidth = $(window).width();
    var maxHeight = $.mobile.getScreenHeight();

    var headerHeight = $('#header').outerHeight(true);
    var mapHeight = maxHeight - headerHeight;
    $('#map').css("height",mapHeight);

});

我真的对这个问题感到疯狂，因为我真的不明白为什么其他浏览器似乎表现得很好。有没有人有一些提示？

Safari的JQuery / JQuery移动页面高度问题

0 个答案: