0

我手上有一个棘手的小虫子。

考虑这个页面。伴随段落的图像都是从精灵中调用的，并且随着视口的缩小，会调用不同的背景位置来适应响应式设计中的各种布局。

在浏览器测试中，所有视图/设备都没有为所有设备/浏览器提供严重的错误，除了 IE<9...和​​iOS（随附的检查器视图）。似乎不知何故 iOS设备（相同的视图/宽度在桌面上正确显示）出于某种原因，没有在这些 div 中显示任何内容。Inspector 没有抛出任何错误，并且网络计时器显示精灵确实加载了。

为了加深情节，如果我调用直接 URL，我可以在 iOS Safari 中加载精灵。所有图像资产的 Perms 设置为 755，我尝试使用各种 dom 元素（div、span、p、i）和背景技术（即包括 a &nbsp;in the <div>、declaringcontent: '';和 conversely content: ' ';）；

我已经在 Mac/Win Chrome/Firefox/Safari、Android 设备、iPhone4/5 和 iPad (iOS6) 上对此进行了测试。不显示（至少在我的硬件上）背景 div 的设备是 iPhone 和 iPad。

有人对此有见识吗？

4

3 回答 3

1

可爱的网站。

问题是你的 Tiny Couch 里有一个异常巨大的精灵。虽然它只有 300kb 多一点（仍然很大），但可能是尺寸意味着它无法处理 - 我以前从未见过这个，所以我可能会弄错。

我喜欢尝试使用 sprite 来提供服务的想法，这意味着只有一个 http 请求，但在这种情况下，你的 sprite 的底部部分只会在移动设备上查看时被调用。可能值得将其拆分为桌面精灵和移动精灵，然后使用适当的媒体查询加载它们。

原因

于 2013-02-25T07:23:14.307 回答
1

移动版 Safari 中存在一个错误，导致总分辨率大于 2,000,000 像素的 CSS 背景图像根本不显示。2010 年的一篇博文对此进行了深入探讨。据我所知，它从未被纠正过。要显示背景图像，您需要将其缩小（就总像素而言）或将其分成两个或多个精灵。我以前肯定见过这种情况；唯一的解决方法是使图像更小。不是文件大小，以像素为单位。

于 2013-02-26T01:57:09.500 回答
0

在不同的情况下，限制似乎是不同的。我正在使用 iOS 5.1.1 的 iPhone 4 设备上进行测试，文件本身的限制似乎不如背景大小重要。如果我使用 1100 像素 X 1000 像素的背景，它将无法工作。但是如果我将 background-size 设置为 1000px X 1000px 它将起作用。

因此，如果我使用高 DPI(2x) 版本，2000px X 2000px 并将图像大小设置为 1000px X 1000px，它仍然可以工作，即使背景本身更大。

因此，建议您使用 1000px X 1000px 作为默认精灵，然后您至少可以拥有 2xDPI。没试过3x。

于 2014-03-18T09:12:07.377 回答