我正在使用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%; …