Question

我正在使用jquery mobile等手机应用程序，之前发现了一个浏览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);

这些是我正在接触的事件。

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

我会附上我正在使用的CSS和2个HTML文件，这样任何人都可以自己查看。

HTML File #1

HTML File #2

提前感谢任何帮助或见解！

Answer 1

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

target-densityDpi=device-dpi

到元视口标记，然后：

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

到页脚本身。这解决了所有缩放问题（即使在更改方向时）以及在您点击任何类型的焦点元素（如选择菜单）时固定页脚向上跳跃。

jQuery mobile在页面更改后没有调整大小

1 个答案: