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浏览器错误。

jsFiddle DEMO

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

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

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

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部分中，我还使用footer将data-position固定在页面底部：

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

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

<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与jQuery 1.8.2和jQuery Mobile 1.2.0无法正常工作/ strong>在jsFiddle中使用 scrollBars 函数时。

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

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

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

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

Answer 2

尝试改变这一点：

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

到那个：

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

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

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

2 个答案: