jQuery Mobile的突破造型，因为最小高度

正如你可以看到，当使用正确的移动设备在桌面上或加载网站视口大小，您将看到一个有三个选项的红色框。红色方块是由一类飞溅所告知的红色页面。（我最初把这个作为一个单独的DIV，使用固定的位置坐在页面的顶部，但是这在定位时有几个问题）。

在桌面上，这工作正常，但在移动设备上，例如iPhone在工具栏消失时使用Safari和/或滚动/更改方向时会出现黑条，这是因为由于div不占用屏幕的全部大小，因此正在出现（jq mobile使用最小高度，即使用框架完成此操作）。

有关如何解决此问题的任何想法？还是有类似的问题？另外还注意到，在进行转换时，他们似乎被切断了，可能归因于这个最小高度不能正确处理。

例子：

enter image description here

编辑：我已经改变了机身为黑色的原因是因为当你做翻转的过渡，这是你所看到的后面，黑色的是正确的颜色在手机（如iPhone）上进行转换时的背景。

2012-07-05 Cameron

除了着陆页内容不居中，它在IE9移动版（WP 7.5）中正常工作。你能发布你的问题的截图吗？这有点难以理解。 – Bojangles 2012-07-05 10:44:19

见附件。还注意到，有时从横向切换到纵向时黑色出现在侧面。 – Cameron 2012-07-05 10:48:11

您应该使用Jquery mobile增强的'listview'并将您的内容保存在DIV中，其中data-role ='content'。 jquery mobile会让你的内容全屏。你不应该手动设计listview或其他东西。

我没有设置图标和您的标志，但你会得到的想法。如果可能，请使用Jquery mobile Theme Roller进行基础样式，并在其上进行自定义。

编辑： 你可以在div上设置color-role =“page”的颜色。

像：

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

而在HTML

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

我已经更新的jsfiddle链接。

2012-07-05 10:58:52 Nachiket

这并没有解决问题！由于页面本身，而不是内容需要红色，所以在你的例子中，我会得到相同的结果。 – Cameron 2012-07-05 11:45:36

回答