iPhone没有完全重复背景图像

Question

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

这就是iPhone和完整网站网址上的样子： Example website

Answer 1

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

如果减小浏览器的宽度，问题也是一样的。问题是背景IS拉伸，但网站只有拉伸的背景图像宽。徽标下方的滑动位虽然有一个固定的宽度，但却产生了背景不够伸展的错觉。

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

Answer 2

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

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

Answer 3

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

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