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

I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents.

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

The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts?

我遇到的问题是，在页面之间的过渡期间，存在“口吃”，因为页面高度在过渡期间会发生变化。我试图阻止这种情况发生。有什么想法吗？

I've created a sample below to really illustrate the point. http://jsfiddle.net/fz7qs/2/

我在下面创建了一个示例来说明这一点。 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>

2 个解决方案

#1

The entire jsFiddle page jumps on the very first visit in Chrome desktop browser, so press the jsFiddle RUN Button to load correctly before use.

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

EDIT: Answer and jsFiddle revised per comment section developments.

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

EDIT 2: jsFiddles now use jQuery 1.7.2 with jQuery Mobile 1.2.0 to fix Chrome Browser Bug.

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

jsFiddle DEMO

jsFiddle DEMO

The solution is to set your styles in a CSS file and not the HTML section since the jQuery Mobile UI has it's own style themes via a style sheet too.

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

Also, you have an extra closing div for page at the bottom in that HTML as well as not closing the webpage. The head section in your HTML is not necessary for jsFiddles, as the page is setup for HTML5 and you just need to import files (mobile jQuery) into jsFiddle using the Manage Resources button.

此外，您在该HTML的底部还有一个额外的结束div，以及不关闭网页。 jsFiddles不需要HTML中的head部分，因为页面是为HTML5设置的，你只需要使用Manage Resources按钮将文件（mobile jQuery）导入jsFiddle。

Although you listed in your Question as complete percentage units, I've keep the pixels units as shown in your example, but those can be percentages as well.

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

CSS Settings:

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;
}

In your HTML section, I've also pinned the footer to the bottom of the page using data-position:

在HTML部分中，我还使用data-position将页脚固定到页面底部：

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

Besides pinning the footer to the bottom of the page, you can also have it not animate by adding an extra setting of data-id for each page that has the same value.

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

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

jsFiddle FOOTER.

jsFiddle FOOTER。

EDIT 2: Per recent discovery of jQuery 1.8.2 and jQuery Mobile 1.2.0 bug seen in Chrome (hidden scrollbar still causes body elements to jump), here is a revised jsFiddle example:

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

jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0

jsFiddle Percentage基于jQuery 1.7.2和jQuery Mobile 1.2.0

About this bug:

关于这个bug：

I just discovered that using jsFiddle with jQuery 1.8.2 and jQuery Mobile 1.2.0 does not work as intended when overflow is set to hidden during use of a scrollBars function within that jsFiddle.

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

That function is to hide the browsers scrollbars during jQuery animations, preventing elements to briefly jump around during the animation period of page changes.

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

The browsers scrollbars are in fact hidden, but elements in the body section continue to "jump" as if the scrollbars are still present.

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

This does not happen when jsFiddle jQuery is set to 1.7.2.

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

If your curious how to have multiple psuedo pages on a single page, check out this jsFiddle for an unrelated SO Answer here.

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

#2

Try to change this:

试着改变这个：

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

to that:

对此：

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

example: http://jsfiddle.net/fz7qs/13/

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

#1