Question

我一直在使用PhoneGap和jQuery Mobile开展项目。我的设置在单个html文件中使用多个页面。

我遇到了问题，我在任何地方都找不到类似的东西：

当我重新访问一个页面时，这意味着我访问了它，然后导航到另一个页面，现在返回到第一页，标题和内容之间有一些填充，页脚和内容之间也有一些填充。页。

截图如下所示：

http://i.imgur.com/neBwZYx.png

下面你可以看到添加的填充，红色背景，之后返回到上面的页面（每个页面都会发生这种情况）

http://i.imgur.com/u1whW9b.png

这里的代码非常大，所以如果有人有建议，请告诉我如何解决这个问题或在哪里寻找问题。

应该注意的是，只有应用程序在Android平板电脑上运行时才会出现问题，而不是通过笔记本电脑上的浏览器查看时。

谢谢

Answer 1

您可以使用此功能强制使用正确的内容高度：

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

必须在pageshow事件期间激活它，因为只有在此时页面高度才正确：

$(document).on('pageshow', '#index', function(){       
    $.mobile.activePage.find('.ui-content').height(getRealContentHeight());
});

工作示例：http://jsfiddle.net/Gajotres/nVs9J/

如果您想了解有关此功能的更多信息，请阅读我的另一篇文章：https://stackoverflow.com/a/14550417/1848600

Phonegap在重新加载时会破坏jQuery Mobile页面 - 再次访问同一页面

1 个答案: