jQuery Mobile在页面更改后未调整大小

Question

我正在开发一个使用jquery mobile的phonegap应用程序，并且以前找到了一种浏览StackOverflow的解决方案，该解决方案在初始页面和方向更改上都能正常工作。

我的问题是从一页移到另一页后出现的。 它似乎可以调整大小，但是否太大了，我想知道是否有什么办法可以解决？

function contentHeight() {
'use strict';
var screen = $.mobile.getScreenHeight(),
    header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight(),
    footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight(),
    contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height(),
    content = screen - header - footer - contentCurrent;

/* Apply calculation */
$(".ui-content").height(content);
}

这是我发现在此处提交的函数。

$(window).bind('load resize orientationchange', contentHeight);
$(document).ready(contentHeight);
$(document).on('throttledresize orientationchange pagecontainertransition', contentHeight);

这些是我所关注的事件。

如前所述，当您第一次加载主要的初始网页时，它会按预期工作，但是单击指向另一个Web文档的链接会在底部增加50-80px的高度。

我将附加正在使用的CSS和2个HTML文件，以便任何人都可以自己看到。

HTML文件＃1

HTML档案＃2

在此先感谢您的帮助或见解！

Answer 1

经过大量测试后，我最终要做的是添加：

target-densityDpi=device-dpi

到meta视口标签，然后：

data-position="fixed"
data-id="myID"
data-tap-toggle="false"

页脚本身。 这解决了所有缩放问题（即使在更改方向时），还解决了当您点击任何一种焦点元素（例如选择菜单）时页脚跳起来的问题。