更改将在手机上显示的主要内容的jQuery mobile上的背景颜色

Question

在jQuery mobile中，当我尝试更改主要内容的背景颜色时，它只会部分地进行，并且不会填满整个区域的高度。这将用于移动设备，我希望背景颜色扩展并具有响应性，因此它占用了任何设备的整个高度。

很难在jsfiddle上演示，但这里是链接：http://jsfiddle.net/1od6kszg/

这是我的css代码：

.ui-content {
    background-color: green;
}

请告诉我如何将整个背景更改为其他颜色。

由于

Answer 1

我不确定我是否完全理解这个问题 - 您希望显示的背景颜色完全填满任何设备的高度，并且在移动设备上具有不同的颜色。 要为整个高度应用背景颜色，您可以设置.ui-page而不是.ui-content的背景颜色。您的小提琴错过了包括jQuery mobile和jQuery库，我已将其添加到更新的Fiddle 当您使用Web开发工具检查HTML时，您会注意到Fiddle的结果部分中的主体具有其他一些类.ui-page。这是由jquery mobile应用的。因此，将背景颜色设置为.ui-page将覆盖整个高度。

如果要为屏幕宽度较小的设备显示不同的颜色，可以使用媒体查询来实现此目的。在小提琴中，我刚刚为屏幕宽度320px添加了一个：

@media all and (max-width: 320px) {
  .ui-page {
     background-color: red;
  }
}

当您缩小结果窗口时，您会注意到背景颜色会发生变化。

另一种方法是调整.ui-content以获得100％的屏幕高度。这可以通过添加一些JavaScript来完成。由于我不确定是否真的需要（因为更改为.ui-page已经设置了全高背景颜色）并且不想从其他答案中复制代码，只需检查此处set content height 100% jquery mobile给出的答案相关的脚本。