iPod touch iOS6 - 带有大背景图像的元素显示为空白答案

【问题标题】：iPod touch iOS6 - elements with large background images show up blankiPod touch iOS6 - 带有大背景图像的元素显示为空白
【发布时间】：2012-10-10 03:14:26
【问题描述】：

我已经在两个运行 iOS 6 的独立 iPod touch 设备上重现了这一点。iPhone 似乎没有受到影响，iPad 也没有。

我在我的 Web 应用程序中使用 sprite 文件来存储图像。我现在正在尝试提供视网膜支持，因此我创建了一个单独的视网膜精灵文件，该文件的尺寸是低质量文件的两倍。

Chrome 和 Safari 似乎都不喜欢显示这个。

我正在执行以下操作： .img { background: url(xx-retina.png) no-resize top left; height: xx; width: xx; display: block }

在正文中： <div class='img'/>

标签的类型无关紧要。我指定的背景位置偏移无关紧要。该图像不会显示，但如果我查看调试工具，它似乎已加载。如果我开始裁剪图像，最终它会出现。

有人知道这方面的信息吗？

【问题讨论】：

标签： html css ios6 css-sprites ipod-touch

【解决方案1】：

我遇到了同样的问题。我已经测试过大型 png-8、png-24 和 gif 图像，它们是否具有透明度并不重要 - 图像不会显示在 iPod 上。

我也尝试在画布中绘制图像，但也没有用。

如果您不需要透明度，您可以将图像设为 jpg - 我使用的最大 jpg 为 14mb，并且仍然可以正常显示。

【讨论】：

我确实需要透明度。这些发现对我来说很奇怪，因为在内存中，图像以位图解压缩存储，每像素 4 位 (ARGB)，因此 JPG 不应该使用更少的内存。除非他们只是以某种方式解压其中的一部分。

【解决方案2】：

同样的问题发生在我身上。我使用大图像作为网站开头部分的背景。在 iPad 和 iPhone 上，它工作得很好。在 iPod 上，图像根本没有加载。这么奇怪！我做过更复杂的网站，有很多图片，但从未遇到过这个问题。

【讨论】：

顺便说一句，我使用的是 jpg 图像！还是不能正常显示！！

【解决方案3】：

我有同样的问题 - 运行 iOS 6 的第 4 代 iPod Touch 不会显示 phonegap 页面的背景图像。由于我仍然希望较大/高分辨率的设备使用高分辨率图像，所以我所做的是使用媒体查询来更改较小屏幕的背景图像。

@media (max-width: 500px) {
    #login {
        background: url(../../splash/640-960.png);
    }
}

对于 OP，您需要使用类似的媒体查询并将您的图像类设置为使用较小/原始图像：

@media (max-width: 500px) {
    .img {
        background: url(xx-non-retina.png) no-resize top left; 
    }
}

我选择了 500 像素的最大宽度，因为第 4 代 iPod Touch 的有效分辨率为 320w x 480h，因此横向屏幕宽度将为 480 像素。

【讨论】：