Javascript 使用Jquery Mobile在转换期间停止页面调整

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

我的问题是，在页面之间的转换过程中，会出现“口吃”，因为页面高度在转换过程中会发生变化。我正试图阻止这一切的发生。有什么想法吗

我在下面创建了一个示例来真正说明这一点。

页面标题
至第2页
页面内容显示在此处。

页脚
第2页
至第1页
这是第2页
页脚

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

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

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

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

另外，在HTML的底部有一个

额外的关闭div

，用于页面，并且不关闭网页。jsFiddle不需要HTML中的head部分，因为页面是为

HTML5

设置的，您只需要使用管理资源按钮将文件（mobilejquery）导入jsFiddle

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

CSS设置：

a{
光标：手；
光标：指针；
}
.内容1{
高度：268px；
}
.text1{
身高：50%；
边框：1px纯黑；
}
.内容2{
高度：568px；
}
.text2{
身高：80%；
边框：1px纯黑；
}

在您的HTML部分中，我还使用

数据位置将
页脚
固定到页面底部：



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





编辑2:根据最近在Chrome中发现的
jQuery 1.8.2
和
jQuery Mobile 1.2.0
错误（隐藏的滚动条仍会导致主体元素跳转），下面是一个修改后的JSFIDLE示例：


关于此错误：

我刚刚发现，在使用JSFIDLE中的
滚动条函数时，如果将
溢出设置为
隐藏，那么将JSFIDLE与jQuery 1.8.2和jQuery Mobile 1.2.0配合使用并不能达到预期效果

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

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

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


如果您想知道如何在一个页面上拥有多个psuedo页面，请查看此页面以查找不相关的页面。
尝试更改此页面：

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



为此：

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



示例：
您在
#test2
上设置了568px的高度。。这是故意的吗？在过渡期间隐藏一切。。。！也许你可以在屏幕中间显示一个加载图像？新的发展：在我的答案中检查Eddi2部分。干杯
<div data-role="content" style="height: auto;">