iphone - CSS 背景尺寸在移动设备上损坏

Question

我正在构建一个带有标题元素的站点，该元素具有固定的全屏背景图像。它完全按预期工作，但在移动设备上除外。我的 iphone/ipad 上的 Safari 和 Chrome 都没有正确显示它——它似乎正在缩放到比标题元素大得多的尺寸。

这是完整的网站:http://www.loganmerriam.com/

以及相关的 css:

header {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

即使我使用媒体查询加载小得多的背景，它仍然只显示图像的一小部分缩放部分。

还有谁能指导我在设备上检查 CSS 的好方法吗？

Answer 1

不确定它是否会有很大帮助，但是 http://screenqueri.es/index.php可能会。