iPhone没有完全重复背景图像答案

【问题标题】：iPhone not fully repeating background imageiPhone没有完全重复背景图像
【发布时间】：2011-08-30 19:17:47
【问题描述】：

我已经建立了一个网站，我认为它没有 css 错误，直到我在 iPhone 上进行测试。我有一个奇怪的问题，重复的背景图像没有完全延伸到整个页面。

这是它在 iPhone 和完整网站 URL 上的样子： Example website

【问题讨论】：

【解决方案1】：

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

如果您减小浏览器的宽度，问题也是一样的。问题是背景正在拉伸，但网站的宽度仅与拉伸的背景图像一样宽。徽标下方的滑动位具有固定宽度，并且会产生背景拉伸不够远的错觉。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

遗憾的是，添加视口以将缩放设置为 100% 并不是我想要的。

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

【讨论】：