Question

我在调整应用程序中某个页面的大小时遇到问题。

我正在使用

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi"/>

用于设置我的页面的“正常”大小我想调整特定页面的宽度，因为它显示更宽的图像。但是当我试图像

那样进行调整时

<div date-role="page" id="organigram" style="min-width:1000px;">

或通过CSS：

#organigram > .ui-page {
min-width: 1000px;
}

它设置了我所有页面的宽度，直到我使用图像访问了这个特定的页面。当我在页面标题中移回“后退”或“主页”-Button时，所有尺寸都恢复正常（设备宽度），带有图像的页面保持新的最小宽度。但是这样对我来说没用。我试图只改变页面内图像的宽度，但这根本不会导致宽度变化。有任何想法吗？如果需要额外的代码，我会提供。提前谢谢！

/ edit：我找到了一个使用JavaScript的方法。当页面打开时，我的脚本开始覆盖整个页面

document.getElementById('organigram').innerHTML = myPageContent;

无论如何，这不是解决方案。

Answer 1

jQUery移动页面的问题是，当您更改一个页面维度时，所有页面维度都会发生变化，这是可以理解的，它们都需要适合视口。

您可以做的是仅在该页面处于活动状态时更改页面宽度。为此，您需要使用jQuery Mobile页面事件：

#pageId 是您要修改的网页的ID。

$(document).on('pagebeforeshow', '#pageID', function(){       
    $(this).width(1000);
});

$(document).on('pagebeforehide', '#pageID', function(){       
    //Return page width to the correct size
});

如果您从未使用过jQuery Mobile页面事件，请查看我的其他答案，您会发现很多有用的信息： jQuery Mobile: document ready vs page events

在jQuery mobile中只调整一页的屏幕大小

1 个答案: