iPhone 屏幕背景图太大，需要使用 CSS 雪碧图技术。

Question

我有一个CSS背景的精灵表，尺寸为2000x2000像素，在所有桌面浏览器中都可以正常工作，但在iPhone上的Safari却根本没有渲染出来。将尺寸降低到1000x1000可以完美地呈现（好吧，除了我现在错过了四分之三的精灵表之外）。在使用背景图像时是否存在任何限制？2000x2000并不算太大。尝试绕过重新调整大量CSS定位的工作。此外，我正在使用媒体查询来进行布局（最大宽度而不是最大设备宽度），但仍然使用相同的图形。编辑：啊，是的，它在Android设备上完美地工作。

- russinkungen

Answer 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

- Gurpreet Singh

---

看到有人遇到了类似的问题，但那与应用程序开发有关，以及在将图像保存在内存中时iOS的限制。希望还有其他解决方法。幸运的是，别人会进行重构 :) - russinkungen

你很幸运，虽然这很令人沮丧，但我们学到了一个好教训。 - Gurpreet Singh

这里奇怪的是，我们已经在 iPhone 4 上进行了测试，它应该支持 2048x2048。 - russinkungen

我发现这是不正确的。我已经在itouch 4g上成功获取了高达2048的图像。 - Kir

我觉得最好还是以1024为基准。一旦你想到了，重新计算坐标就很简单了。如果精灵图像a的位置是0，-1056px，那么如果你从这个精灵图像复制并粘贴到PSD的其他部分形成新的精灵图像，它的新背景位置就是0,0。因此，在此之后出现的任何后续精灵图像，只需将y位置值减去1056即可。 - Claire