我正在使用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 -->
看看jquery移动页面的解剖结构。