我正在使用 Jquery Mobile 和 Phonegap 开发应用程序。我遇到的问题是，当我进行页面转换时，传入页面首先显示不正确(DOM 元素不在正确的位置或大小不正确)，然后一旦转换完成，元素会调整大小并移动到正确的位置. (此外，转出的页面在移出之前也会出现错误)。我已经使用淡入淡出和幻灯片过渡对此进行了测试(我希望最终有幻灯片过渡)。
这是一个说明问题的 jsFiddle:
http://jsfiddle.net/fz7qs/2/
我还使用一个 div 作为页面容器，这样整个页面不会同时转换，而只是页面容器 div。
我对几乎所有内容(高度、宽度、边距等)都使用了 css 百分比，以便应用程序可以缩放到不同的设备尺寸。此外，我正在使用 javascript 将一些元素居中(在 pageshow 事件中触发)。我认为这些百分比是问题的一部分。我在桌面浏览器上构建了一个简单的测试(去掉 phonegap)并为页面容器设置了一个固定的高度。这似乎解决了问题，但是当我在手机上尝试时，问题仍然存在。
应用中的每个页面都使用 $.mobile.loadPage() 预加载到 DOM 中。我想如果我预加载它们，百分比高度将相对于父级(页面容器 div)并且过渡应该看起来正确。
进一步研究 Jquery Mobile，我发现在转换期间，页面的高度被设置为空字符串。我试图注释掉这一行只是为了测试它是否适用于百分比高度。同样，它适用于我的桌面测试，但不适用于手机。
我在三星 Galaxy Nexus 上使用 Android phonegap(API 级别 8 - Android 2.2)进行测试。
有没有办法在页面转换之前应用 css 和 javascript 定位，同时保持基于百分比的值？
index.html
<body>
<!-- header on every page -->
<div id="mainHeader">This is a header</div>
<!-- page content -->
<div id="pageContainer">
<div data-role="page"></div>
</div>
</body>
page1.html
<body>
<div data-role="page" id="page1">
<div class="subheader">
<div class="backButton"></div>
<div class="subheaderText">Settings</div>
<div class="helpButton"></div>
</div>
</div>
</body>
相关的CSS
#pageContainer {
overflow: hidden;
width: 100%;
height: 86.772486772486772486772486772487%;
}
.ui-mobile [data-role="page"] {
min-height: 0px !important;
color: white;
position: relative;
width: 100%;
height: 100%;
background: #868a73;
}
.subheader {
width: 100%;
height: 10.16260162601626016260162601626%;
background-color: #000;
display: inline-block;
text-align: center;
position: relative;
}
.backButton {
background: url("images/back_button.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 8.888888888888888888888888888889%;
height: 52%;
margin-left: 5.555555555555555555555555555556%;
}
.subheaderText {
color: #FFF;
font-size: 2.45em;
font-weight: bold;
display: inline-block;
}
.helpButton {
float: right;
background: url("images/help_button.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 8.888888888888888888888888888889%;
height: 64%;
right: 5.555555555555555555555555555556%;
}
最佳答案
首先，您可以使 html 看起来像 jquery 移动教程页面。 你需要有这样的 html 结构:
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
关于android - Jquery Mobile 页面在页面转换期间调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13807260/