CSS 背景精灵对于 iPhone 来说太大了答案

【问题标题】：CSS background sprite too large for iPhoneCSS 背景精灵对于 iPhone 来说太大了
【发布时间】：2012-11-10 23:34:55
【问题描述】：

我有一个尺寸为 2000x2000 像素的 css 背景精灵表。在所有桌面浏览器中都可以正常工作，但在 iPhone 版 Safari 上根本不渲染。

将尺寸降低到 1000x1000 使其呈现完美。（好吧，除了我现在错过了精灵表的四分之三）。

对于背景图片的尺寸有什么限制吗？ 2000x2000 并不是那么大。试图绕过重做大量 css 定位的工作。

另外，我正在对布局使用媒体查询（最大宽度，而不是最大设备宽度）。但我仍然使用相同的图形。

编辑：啊，是的，它可以在 Android 设备上正常运行。

【问题讨论】：

标签： iphone css safari responsive-design css-sprites

【解决方案1】：

我们在 iPad 和 iPhone 上遇到了同样的问题。最安全的选择是使用 1024x1024 像素或更少。最终我们不得不将精灵表分成两部分并再次进行 CSS。

根据http://www.glbenchmark.com/和http://developer.apple.com/library/ios/#documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/OpenGLESPlatforms/OpenGLESPlatforms.html

Device                              Maximum texture size
iPod Touch                           1024 x 1024
iPod Touch (Second Generation)       1024 x 1024
iPod Touch (Third Generation)        2048 x 2048
iPod Touch (Fourth Generation)       2048 x 2048
iPhone                               1024 x 1024
iPhone 3G                            1024 x 1024
iPhone 3GS                           2048 x 2048
iPhone 4                             2048 x 2048
Samsung GT-i9100 Galaxy S2           4096 x 4096
Google Nexus S                       2048 x 2048
HTC EVO 4G+                          4096 x 4096
HTC Vision (Desire Z)                4096 x 4096
LG P990 Optimus 2X                   2048 x 2048
HTC G1                               1024 x 1024
Barnes & Noble Nook color            2048 x 2048

来源：http://hellomobiledevworld.blogspot.co.uk/2011/09/sprite-sheets-and-maximum-texture-size.html

【讨论】：

看到其他人有类似的问题，但这与应用程序开发和 ios 在内存中保存图像时的限制有关。希望有其他方法可以解决这个问题。幸运的是，其他人将不得不进行重构。 :)
你很幸运，这很令人沮丧，但我们吸取了很好的教训。
奇怪的是我们已经在 iphone 4 上测试过了，它应该支持 2048x2048。
我发现这些都不正确。我已经能够在 itouch 4g 上获得高达 2048 的图像
好吧，我认为最好还是为 1024 做。仔细想想，重新计算坐标很简单。如果 sprite 图像 a 是 0，-1056px，那么如果你从这个 sprite 图像复制并粘贴到 PSD 的其余部分到一个新的 sprite 图像，它的新 bg 位置是 0,0。因此，在此之后出现的任何后续精灵图像，仅从 y 位置值减去 1056。