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

Question

我的css背景有一张精灵表,尺寸为2000x2000像素.适用于所有桌面浏览器,除了适用于iPhone的Safari,它根本无法渲染.

将尺寸降低到1000x1000使其呈现完美.(除了我现在错过精灵表四分之三的事实之外).

在背景图像的尺寸方面有任何限制吗？2000x2000并不是那么大.试图绕过重做大量css定位的工作.

此外,我正在使用媒体查询布局(最大宽度,而不是max-device-width).但我仍然使用相同的图形.

编辑:啊是的,它适用于Android设备就好了.

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