使用 Jquery Mobile 在过渡期间停止页面大小调整

Question

我正在构建一个 phonegap 应用程序，它需要扩展到所有分辨率，因此我用百分比来定义一切。我还使用了一个带有我在 Jquery 中定义的 div 作为内容的固定标题。

我遇到的问题是，在页面之间的转换过程中，由于页面高度在转换过程中发生了变化，所以会出现“卡顿”。我正试图阻止这种情况发生。有什么想法吗？

我在下面创建了一个示例来真正说明这一点。 http://jsfiddle.net/fz7qs/2/

<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <a id="page2link">To Page 2</a>

    <div data-role="content">    
        <p>Page content goes here.</p>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="test2" style="height: 568px">

<div data-role="header">
    <h1>Page 2</h1>
</div>

<a id="page1link">To Page 1</a>

<div data-role="content" style="height: 50%;">
    <p style="height: 80%; border: 1px solid black;">This is page 2</p>        
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div>

Answer 1

尝试改变这一点：

<div data-role="content" style="height: 50%;">

到那个：

<div data-role="content" style="height: auto;">

示例：http://jsfiddle.net/fz7qs/13/

Answer 2

整个 jsFiddle 页面在 Chrome 桌面浏览器第一次访问时跳转，所以在使用前按下 jsFiddle RUN 按钮以正确加载。

编辑：根据评论部分的发展修订答案和 jsFiddle。

编辑 2：jsFiddles 现在使用 jQuery 1.7.2 和 jQuery Mobile 1.2.0 来修复 Chrome 浏览器错误。

jsFiddle DEMO

解决方案是在 CSS 文件而不是 HTML 部分中设置您的样式，因为 jQuery Mobile UI 也通过样式表拥有自己的样式主题。

此外，您在该 HTML 的底部有一个 extra closing div 页面，并且没有关闭网页。 jsFiddles 不需要 HTML 中的 head 部分，因为该页面是为 HTML5 设置的，您只需使用 Manage Resources 按钮将文件（移动 jQuery）导入 jsFiddle。

虽然您在问题中将其列为完整的百分比单位，但我保留了示例中所示的像素单位，但这些也可以是百分比。

CSS 设置：

a {
 cursor: hand;
 cursor: pointer;    
}

.content1 {
  height: 268px;
}

.text1 {
  height: 50%;
  border: 1px solid black;
}

.content2 {
  height: 568px;
}

.text2 {
  height: 80%;
  border: 1px solid black;
}

在您的 HTML 部分，我还使用 data-position 将 footer 固定在页面底部：

<div data-role="footer" data-position="fixed">

除了将footer 固定在页面底部之外，您还可以通过为每个具有相同值的页面添加额外的data-id 设置来使其不动画。 p>

<div data-role="footer" data-id="foo" data-position="fixed">

jsFiddle FOOTER.

---

编辑 2： 根据最近在 Chrome 中发现的 jQuery 1.8.2 和 jQuery Mobile 1.2.0 错误（隐藏的滚动条仍然会导致正文元素跳转），这里是一个修改后的 jsFiddle 示例：

jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0

关于这个错误：

我刚刚发现，当 overflow 设置为 hidden在该 jsFiddle 中使用 scrollBars 函数。

那个功能是在jQuery动画的时候隐藏浏览器的滚动条，防止页面变化的动画期间元素短暂的跳来跳去。

浏览器的滚动条实际上​​是隐藏的，但正文部分的元素继续“跳跃”，就好像滚动条仍然存在一样。

当 jsFiddle jQuery 设置为 1.7.2 时不会发生这种情况。

---

如果您对如何在一个页面上拥有多个伪页面感到好奇，请查看此 jsFiddle 以获取不相关的 SO Answer here。