页面更改后 jQuery mobile 未调整大小答案

【问题标题】：jQuery mobile not resizing after page change页面更改后 jQuery mobile 未调整大小
【发布时间】：2025-12-22 00:00:09
【问题描述】：

我正在使用 jquery mobile 开发一个 phonegap 应用程序，之前发现了一个浏览 * 的解决方案，该解决方案在初始页面和方向更改上运行良好。

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

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-80 像素高度。

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

HTML File #1

HTML File #2

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

【问题讨论】：

CSS 文件：hastebin.com/zokaleceji.css
您是否也在第二个 html 页面上注册了您的功能？如果没有，那么您将需要在第二页上注册它才能工作。但是为 JQM 应用程序创建两个单独的 html 文件并不是一个好习惯。
如果我理解正确，该函数本身应该是全局的。我尝试向该函数添加一个 console.log() 元素以查看发生了什么，并且无论您是否在后续页面中添加 76 个像素'正在使用多页单 HTML 布局或使用多个 HTML。
下一页加载时您的功能是否正常工作？
抱歉回复晚了。是的，该功能在新页面上加载良好，与第一个“初始”页面的唯一区别是它出于某种原因在内容 DIV 的最大高度上增加了 70-80 像素。 :)

标签： jquery html css cordova jquery-mobile

【解决方案1】：

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

target-densityDpi=device-dpi

到元视口标签，然后：

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

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

【讨论】：