2013-05-10 121 views
1

我一直在使用的PhoneGap和jQuery Mobile的一个项目。我的设置在单个html文件中使用多个页面。的PhoneGap打破jQuery Mobile的页面加载时 - 访问同一页面再次

我面临的一个问题,我还没有发现任何地方任何类似:

当我再次访问一个页面,这意味着我访问了它,然后导航到另一个页面,现在回到第一页,有是标题和内容之间以及页脚和页面内容之间的一些填充。

截屏如下显示:

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

下面你可以看到填充补充说,红色的背景,当返回页面上方之后(这种情况与每一页)

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

的代码是非常大的,张贴在这里,如果任何人有什么建议,请告诉我如何解决这个问题或者到哪里寻找问题。

应当注意的是,只有当应用程序在Android平板电脑上运行,而不是通过我的笔记本电脑浏览器中查看时存在问题。

谢谢

回答

0

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

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

+0

我做同样的事情,这就是为什么这是我在全屏幕放在第一位。当我第二次访问该页面时发生问题。正如你可以看到标题移动到屏幕的可见空间上方并在页眉和页脚之间添加空间。红色的颜色你看到的是背景颜色的div保持整个页面和浅灰色是在div#内容的背景颜色。 – 2013-05-10 09:05:44

相关问题