javascript - 使用 Jquery Mobile 在转换期间停止页面调整大小

Question

我正在构建一个需要扩展到所有分辨率的phonegap应用程序，因此我用百分比来定义所有内容。我还使用固定 header 和我在 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

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

编辑:答案和 jsFiddle 根据评论部分的发展进行了修改。

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

jsFiddle DEMO

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

此外，您在该 HTML 的底部还有一个额外的关闭 div 页面，并且不关闭网页。 HTML 中的 head 部分对于 jsFiddles 来说不是必需的，因为页面是针对 HTML5 设置的，您只需使用管理资源将文件(移动 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 部分中，我还使用数据位置将页脚固定到页面底部:

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

除了将页脚固定到页面底部之外，您还可以通过为每个具有以下内容的页面添加额外的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 中(隐藏的滚动条仍然会导致 body 元素跳转)，这里是一个修改后的 jsFiddle 示例:

jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0

关于此错误:

我刚刚发现，当 overflow 设置为 时，将 jsFiddle 与 jQuery 1.8.2 和 jQuery Mobile 1.2.0 一起使用无法按预期工作在 jsFiddle 中使用 scrollBars 函数期间隐藏。

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

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

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

<小时/>

如果您好奇如何在单个页面上拥有多个伪页面，请查看此 jsFiddle对于不相关的SO Answer here .