CSS：在移动设备上，背景图像/颜色和容器不能完全拉伸宽度

Question

在移动设备上查看: http://goo.gl/vkhb0

在所有桌面浏览器和多个分辨率下，网站显示正常。顶部轮播图像居中，宽度为1500px。下方的容器包裹物也是居中的960px宽度。有些部分有背景图像或颜色，可从左到右完整重复。

在移动设备上 - 轮播图下方的容器不会展开到全宽。同样，从左到右完整重复的背景图像会停留在屏幕的三分之一处。

这是一个WordPress网站，我已经将viewport meta添加到头文件中。

非常感谢您提出的任何建议。

- user1522087

Answer 1

你应该使用媒体查询，即:

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
 /* Styles */
}

- David Chase

---

我正在尝试确定为什么移动设备上的背景图像在三分之一的宽度处停止。媒体查询无法解决这个问题，因为它已经设置为重复。 - user1522087

正确，但这仍然没有解决问题。我刚刚进行了测试以进行验证，通过增加容器的宽度，背景颜色/图像仍然在达到容器的宽度之前停止。因此，即使增加宽度，背景图像和颜色仍然在到达容器边缘之前停止。感谢您的帮助。 - user1522087

当从包装器中移除960像素和宽度属性时，它看起来更好，为什么要增加宽度呢？ - David Chase

我面前没有平板电脑，所以无法看到它在平板上的显示情况，但在 iPhone 上修改包装器的宽度对解决问题没有任何作用。上面的幻灯片比容器更大，因此增加它是唯一的合乎逻辑的想法，因为它已经无法达到页面的完整宽度。 - user1522087

使用这个工具来测试不同的尺寸，它使用 viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> 来模拟不同的设备尺寸。 - David Chase