Question

我正在使用Jquery Mobile和Phonegap开发应用程序。我遇到的问题是，当我进行页面转换时，传入的页面首先显示不正确（DOM元素不在正确的位置或正确的大小），然后一旦转换完成，元素调整大小并移动到正确的位置。（此外，转出的页面在移出之前也会显示不正确）。我已经使用淡入淡出和幻灯片过渡测试了这个（我想最终有幻灯片过渡）。

这是一个说明问题的jsFiddle：
http://jsfiddle.net/fz7qs/2/

我也使用div作为页面容器，这样整个页面不会立即转换，而只是页面容器div。

我正在使用css百分比几乎所有内容（高度，宽度，边距等），以便应用程序可以扩展到不同的设备大小。另外，我使用javascript来集中一些元素（在pageshow事件上触发）。我认为这些百分比是问题的一部分。我在桌面浏览器上构建了一个简单的测试（取出phonegap）并为页面容器设置了一个固定的高度。这似乎解决了这个问题，但是当我在手机上试用它时，问题仍然存在。

使用$ .mobile.loadPage（）将应用程序中的每个页面预加载到DOM中。我想如果我预加载它们，百分比高度将相对于父（页面容器div），并且转换应该看起来正确。

进一步研究Jquery Mobile，我发现在转换过程中，页面的高度设置为空字符串。我试图评论这一行只是为了测试它是否适用于百分比高度。同样，它适用于我的桌面测试，但不能通过电话。

我在Samsung 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%;
}

Answer 1

首先，您可以使您的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 mobile page anatomy。

在页面转换期间调整Jquery Mobile页面大小

1 个答案: