css - jQuery Mobile 因最小高度而破坏样式

Question

我正在为客户构建一个测试移动网站:http://preview.stafforce.co.uk/mobile/

如您所见，在移动设备或桌面上使用正确的视口(viewport)大小加载网站后，您将看到一个包含三个选项的红色框。红色框是页面本身被一类飞溅告知为红色。 (我最初将其作为一个单独的 DIV，使用固定位置位于页面顶部，但在定位方面存在几个问题)。

在桌面上这工作正常，但在移动设备上，例如当工具栏消失和/或您滚动/更改方向时，使用 Safari 的 iPhone 会出现黑条，这是因为正文显示为 div 未占用屏幕的整个尺寸(jq mobile 使用 min-height 这是完成使用框架来实现这一点)。

关于如何解决这个问题的任何想法？或者遇到过类似的问题？还注意到在进行过渡时，它们再次出现在某些地方被切断，这可能归因于这个最小高度没有得到正确的结果。

例子:

编辑:我将主体更改为黑色的原因是，当您进行翻转过渡时，这就是您在后面看到的，而黑色是在手机上进行过渡时背景的正确颜色，例如iPhone。

Answer 1

您应该使用 Jquery mobile 增强的 'listview' 并使用 data-role='content' 将您的内容保存在 DIV 中。Jquery Mobile 将使您的内容全屏显示。您不应该手动设置 ListView 或其他任何样式。

这是演示:http://jsfiddle.net/nachiket/YSp3x/

我还没有设置图标和你的标志，但你会明白的。如果可能，请使用 Jquery mobile Theme Roller用于基本样式，并在其之上进行自定义。

编辑:您可以在具有 data-role="page"的 div 上设置颜色。

喜欢:

.myPage {
    background-color:#ff0000; 
    background-image:none;
}​

在 HTML 中

<div data-role="page" class="myPage">

我已经更新了 jsfiddle 链接。