CSS背景精灵对于iPhone太大 [英] CSS background sprite too large for iPhone

问题描述

我有一个用于CSS背景的Sprite工作表，尺寸为2000x2000像素。在所有桌面浏览器上都可以正常工作，但iPhone上的Safari根本无法渲染。

I have a sprite sheet for my css backgrounds with a dimension of 2000x2000 pixels. Works fine in all desktop browsers except on Safari for iPhone where it simply doesn't render at all.

将尺寸缩小到1000x1000可以完美呈现。 （除了那个事实，我现在错过了精灵表的四分之三。）

Lowering the size to 1000x1000 makes it render perfectly. (Well except for that fact that I now miss three quarters of the sprite sheet).

在背景图像的尺寸方面是否存在任何限制？ 2000x2000并不庞大。

Are there any constraints when it comes to the dimension of background images? 2000x2000 isn't THAT huge. Trying to get around the work of redoing a lot of css-positioning.

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

Also, I'm using a media query for the layout (max-width, not max-device-width). But I still use the same graphics.

编辑：是的，它可以在Android设备上正常工作。

Ah yeah, it works on Android devices just fine.

推荐答案

我们在iPad和iPhone上遇到了同样的问题。最安全的选择是使用1024x1024像素或更小。最终，我们不得不将Sprite工作表分为两部分，然后再次进行CSS。

We had the same issue on iPad and iPhone. The safest bet is to use 1024x1024 pixels or less. Eventually we had to divide the sprite sheet into 2 parts and did CSS again.

根据 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

这篇关于CSS背景精灵对于iPhone太大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！