0

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

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

在桌面上这工作正常，但在移动设备上，例如使用 Safari 的 iPhone，当工具栏消失和/或您滚动/更改方向时，您会看到一个黑条，这是因为主体出现，因为 div 没有占用完整屏幕大小（jq mobile 使用最小高度，这是使用框架完成的以实现这一点）。

有想法该怎么解决这个吗？或者有类似的问题？还注意到，在进行过渡时，它们在某些地方似乎又被切断了，这可能是由于这个最小高度没有让事情变得正确。

例子：

在此处输入图像描述

编辑：我将 body 更改为黑色的原因是因为当你进行翻转过渡时，这是你在后面看到的，黑色是在 iPhone 等手机上进行过渡时背景的正确颜色。

4

1 回答 1

0

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

这是演示：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 链接。

于 2012-07-05T10:58:52.037 回答