css - 将 html5 appcache 与像素比媒体查询结合使用

Question

我有一个使用 media queries based on pixel ratio 的网络应用程序向客户端设备提供适当分辨率的图像。例如，它将向 Windows 桌面传送 1x 图像，向具有视网膜显示屏的 iPhone 传送 2x 图像。

我有兴趣使用 HTML5 application cache feature使我的网络应用程序可以离线使用。为此，您必须创建一个 list 文件，其中列出您的应用所需的所有文件。当用户访问应用程序时，浏览器获取 list 并下载其中列出的所有文件，为下线做准备。

在我看来这会否定我的媒体查询的意义，因为我必须将 1x 和 2x 图像都放在 list 中，所有客户端最终都会下载所有图像。

想到的主要解决方案是动态交付 list ，使用用户代理嗅探来决定 list 是否应包含 1x 或 2x 图像。这对我来说是可行的，但我很好奇还有哪些其他解决方案可以解决这个问题，或者这只是一个已知的限制/怪癖？

Answer 1

我预感您可以使用媒体查询有选择地只下载每个特定设备所需的图像。过去的结果表明 media queries will only attempt to download images that are needed ，如果假设不需要某些图像是合理的。该页面底部的测试七似乎与您的问题非常相关。

您可以使用像素比率媒体查询创建一个 CSS 文件并将其列在您的 list 文件中，然后在设备上检查它是否实际下载了不必要的图像资源。