iPhone - 数据 URI（css 背景图像）仅在连接到 WIFI 时有效

Posted 2023-03-10

【中文标题】iPhone - 数据 URI（css 背景图像）仅在连接到 WIFI 时有效

【英文标题】：iPhone - Data URI's (css background images) only work when connected to WIFI

【发布时间】：2011-02-02 12:30:26

【问题描述】：

我创建了一个供 android 和 iPhone 设备使用的移动网络应用程序，在测试后我很高兴一切正常，因此决定尝试对其进行一些优化。

我决定在我的 css 文件中使用数据 uri，因为所有图像都是 16x16 像素的小 png 图像。

在我的 iPhone 通过 WiFi 连接到 Internet 进行测试时，图像可以正常加载，但是使用移动数据连接进行连接时，图像不会加载。

查看 Apache 错误日志，我看到由于某种原因，图像被请求为文件（并且没有被找到），尽管使用 WiFi 没有错误...

File does not exist: /www/min/data:image, referer: http://mysite.com/login/

我使用的CSS如下...

    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA5CAYAAAD3PEFJAAAAUUlEQVQYV4XMyw1AABQF0ePpQCNK0Ke+lCEkFmLjWRHx3dzcZCaDItV1m5GZgn0y1+M9AWfl4r2Cv/Jd+fDWN/AXgCyrqukCY6APDIEpMAeWDc7zXPFRLR43AAAAAElFTkSuQmCC");

我已经尝试了所有我能做的事情，不使用 css 速记/使用 css 速记，不同的 mime 类型，不使用 Google Minify，但都无济于事。但这仍然不能解释为什么它可以在 WiFi 上完美运行。

Android 设备也可以与 Firefox、Chrome 和桌面版 Safari 一样完美运行。此外，在加载实际的 PNG 图像文件（与使用数据 URI 嵌入图像相反）时，图像加载良好。

如果有人能对此有所了解，我将永远感激不尽，大多数事情我都能解决，但这让我完全难过！

【问题讨论】：

我应该注意到，这是在英国的 O2 网络上使用 iPhone 3g ios 4.2.1。我的 Android 设备是 T-Mobile 上的 HTC Hero。

这个问题好像和O2图片压缩无关，如果可以依赖下面的教程...edandersen.com/2008/07/13/iphone-o2-fix-the-image-compression

这个问题似乎也与特定的 Web 服务器设置无关。任何想试用我的测试文档的人都可以在这里找到它...daledavies.co.uk/datauri

我用来自美国的 AT&T 手机进行了测试，URL 显示的内容很好。我猜你的供应商有问题。对不起！您可能想与 O2 合作？

我想我不得不这样做了，谢谢你的帮助:)

【参考方案1】：

我想知道运营商是否阻止数据 URI 方案或普通不支持它。我会尝试将笔记本电脑与移动连接连接起来，看看数据 URI 是否有效。嗯，但是您不会在 Web 服务器日志中看到请求失败。我还建议使用wireshark 查看进入服务器的请求，并查看来自移动连接和 wifi 的请求之间是否存在差异（特别是在两个请求中发送的标头）

【讨论】：

谢谢，我确实考虑过数据被运营商重写的可能性，可能会剥离数据uri。但正如你所说，我可能在日志中看不到错误。目前只有我的实时服务器面向互联网，因此我无法在其上安装 Wireshark，但我确实拼凑了一个脚本以将 http 标头转储到数据库表中，不幸的是，我们的代理添加的 HTTP_VIA 和 HTTP_X_FORWARDED_FOR 标头除外其余部分相同。

您是否也尝试过连接笔记本电脑并导航到服务器？这可能表明问题是否与运营商有关。似乎运营商以某种方式使图像请求被视为文件请求而不是数据请求（不确定如何.. :()

运气好吗？这是一个有趣的问题。

嗯，看来我无法尝试，因为我无法越狱 iPhone。今晚我会做更多的研究。

好吧，我无法绑定 iPhone。但我认为也许我在 css 文件的某个地方犯了一个错误，所以我创建了一个单独的测试页面。这表现出相同的行为，我还设法在不同的运营商上找到了一个使用 iPhone 的朋友，并且他的工作正常。现在我很困惑，我们鼓励我们在优化移动网络应用程序时使用数据 uri (code.google.com/speed/articles/mobile.html)。

【参考方案2】：

这并不是真正的解决方案，更多的是一种解决方法......

似乎经过一番折腾，我能找到让它工作的唯一方法（使用 go2）是对包含数据 uri 的 css 使用内联样式。

但是，我的意图是将图像嵌入到外部样式表中，以便它（和嵌入的图像）被缓存，将图像嵌入到 html 文档本身意味着我无法缓存图像，因此必须在每个请求中加载它们。

与往常一样，如果有更好的方法，我很想听听。