使用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

整个jsFiddle页面会在Chrome桌面浏览器中首次访问时跳转，因此请在使用前按jsFiddle RUN按钮正确加载。

编辑：答案和jsFiddle修改每个评论部分的发展。

编辑2：jsFiddles现在使用jQuery 1.7.2和jQuery Mobile 1.2.0来修复Chrome Browser Bug。

jsFiddle DEMO

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

此外，您在该HTML的底部还有一个extra closing div ，以及不关闭网页。 jsFiddles不需要HTML中的head部分，因为页面是为HTML5设置的，你只需要使用Manage Resources按钮将文件（mobile 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设置来使其不具有动画效果。

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

jsFiddle FOOTER 。

---

编辑2：最近发现jQuery 1.8.2和jQuery Mobile 1.2.0在Chrome中看到的bug（ 隐藏的滚动条仍会导致身体元素跳转 ），这里是一个修改过的jsFiddle示例：

jsFiddle Percentage基于jQuery 1.7.2和jQuery Mobile 1.2.0

关于这个bug：

我刚刚发现在jsFiddle中使用scrollBars函数时，将overflow设置为hidden时，使用jsFiddle与jQuery 1.8.2和jQuery Mobile 1.2.0无法正常工作。

该功能是在jQuery动画期间隐藏浏览器滚动条，防止元素在页面更改的动画期间短暂跳转。

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

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

---

如果你好奇如何在一个页面上有多个伪页面，请查看这个jsFiddle以获取不相关的SO答案 。

Answer 2

试着改变这个：

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

对此：

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

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