iPhone不完全重复背景图像

Question

我已经构建了一个网站，我认为是免费的CSS错误，直到我在iPhone上测试这个。我有一个奇怪的问题，因为重复的背景图片不能在页面上完全展开。

这就是它看起来像在iPhone和完整的网站URL： Example website

Answer 1

试试这个：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

的问题是一样的，如果你减少的宽度您浏览器。问题是背景伸展，但网站只有拉伸的背景图像一样宽。徽标下面的滑动位有一个固定的宽度，并产生背景不够伸展的错觉。

上述代码应通过确保网站缩放以适应浏览器的宽度来解决此问题。

Answer 2

通过将视口元标记设置为HTML的头部部分来关闭自动缩放。这将设置你的页面，以匹配显示器的宽度的宽度，

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

Answer 3

可悲的是将视口设置缩放至100％，是不是我所期待的。

进一步调试后，我发现问题是由顶部的大横幅图像造成的。这是一个比网站其他部分更大的宽度，通过将其更改为居中背景图像并向容器中添加隐藏的溢出来修复所有问题。