iPhone没有完全重复背景图片

Question

我建立了一个我认为没有CSS错误的网站，直到我在iPhone上对其进行了测试。 我有一个奇怪的问题，就是重复的背景图像无法完全延伸到整个页面。

这是在iPhone和完整网站URL上的样子： 示例网站

Answer 1

尝试以下操作： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

如果您减小浏览器的宽度，问题也相同。 问题是背景IS拉伸，但是网站的宽度仅与拉伸后的背景图像一样。 徽标下方的滑动位具有固定的宽度，并且产生了一种幻觉，即背景拉伸得不够远。

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

Answer 2

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

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

Answer 3

可悲的是，添加视口以将缩放比例设置为100％并不是我想要的。

进一步调试后，我发现问题是由顶部的大横幅图像引起的。 通过将其更改为居中的背景图像并在容器中添加隐藏的溢出漏洞，该宽度比网站的其余部分要大。