iphone/ipad 上的背景图片 css 问题（无响应）答案

【问题标题】：Background image css issue on iphone/ipad (not responsive)iphone/ipad 上的背景图片 css 问题（无响应）
【发布时间】：2014-06-05 21:31:17
【问题描述】：

我有一个网站，虽然没有响应，但在 iphone 或 ipad 上查看时应该只显示桌面网站的缩放版本。问题是我的主要背景图像由于某种原因被压缩。如果我调整浏览器的大小，我无法重新创建这个问题，所以我只是在努力找出导致它的 iOS 上发生了什么。该网站是 - 任何帮助将不胜感激！

添加信息：问题似乎与 div.bg-main 及其背景图像设置有关，设置在 style.css 的第 243 行

【问题讨论】：

标签： css ios

【解决方案1】：

iOS 对背景图像有 2 兆像素的限制。您的图像是 1587*1340 = 2,126,580 像素 - 有点太多了。因此它会缩小它。

您可以使用background-size 属性将大小修复为您期望的大小。你会丢失一些细节，但它会是正确的大小。将此添加到您的 CSS：

.bg-main { -webkit-background-size: 1587px 1340px }

【讨论】：

……而且，就像 Scott 上面提到的，有一些 PNG 的文件大小超过了 1 兆。我建议将它们保存为 JPG，并通过破碎机运行整个网站的图像。
非常感谢。直到现在我才意识到 iOS 的限制。您的 CSS 规则改进了一些事情，因为文本现在全部位于 bg 的浅黄色部分，并且清晰易读。仍然不确定为什么 bg 图像的外部部分不可见，有什么想法吗？是的，肯定需要整理整个网站的图像，一般来说太大了
DOM 树中的第一个宽度是.main { width: 1075px; }。这是在背景图像的大小之内，因此外部将被剪裁。如果您需要查看这些内容，则可以使用元视口声明来扩展初始视口以包含它们。例如。 <meta name="viewport" content="width=1587, initial-scale=1">（未经测试，我手头没有 iPad）。
非常感谢。我添加了元标记，将宽度更改为 1287（在 iphone 视口中效果很好）并删除了初始比例。尽管这似乎在我的 iPhone 上运行良好，但我想知道这是否可能是其他视口尺寸的问题，例如 iPad（或视网膜显示器？）。我想我需要拿一个 iPad 来检查一下。

【解决方案2】：

你可以用 2 个部分切掉你的大图像，并为一个 div 添加 2 个背景。

像这样：

background: url(1.jpg) top center, url(2.jpg) bottom center

【讨论】：

【解决方案3】：

那张图片很大，也许这就是问题所在。尝试使用“保存为网络”来减小尺寸（尝试让设计使用 .jpg）。

【讨论】：

感谢您的回复。是的，我继承了这个网站，图像肯定需要优化。我不认为这会是这里的问题......但在你提到它之后，谷歌搜索显示移动 safari 中存在一个错误，它会将背景图像缩小到一定大小