我有一个网络应用程序，它使用基于像素比的媒体查询向客户端设备提供适当分辨率的图像。例如，它将向 Windows 桌面提供 1x 图像，向具有视网膜显示屏的 iPhone 提供 2x 图像。
我有兴趣使用HTML5 应用程序缓存功能使我的 Web 应用程序能够离线使用。为此，您必须创建一个清单文件，其中列出了您的应用所需的所有文件。当用户访问应用程序时，浏览器会获取清单并下载其中列出的所有文件，为离线做准备。
在我看来，这将否定我的媒体查询的意义，因为我必须将 1x 和 2x 图像都放在清单中，并且所有客户端最终都将下载所有图像。
想到的主要解决方案是动态交付清单，使用用户代理嗅探来决定清单应该包含 1x 还是 2x 图像。这对我来说是可行的，但我很好奇还有哪些其他解决方案可以解决这个问题，或者它只是一个已知的限制/怪癖？
我自己解决了同样的要求，为此我创建了一个快速中间件，旨在使用或不使用 AppCache 和/或 Cordova，支持 prefix-dpi-suffix（例如 file@2x.jpg）语法。
您可以将它与内容图像、包含媒体查询的 css 文件或任何其他文件一起使用，只需将 @[num]x 添加到您的文件中，它将提供该文件而不是“普通”文件（您可以使用自己的前缀和后缀字符串）。
这意味着当浏览器在设备像素比为 2 的设备上请求名为 mypic.png 的文件时，中间件实际上会首先尝试服务 mypic@2x.png，并且只有当它不存在时才会服务 mypic .png。
使用Service Workers可以实现更优雅的解决方案，目前并非所有浏览器都支持。
我有一种预感，您可以使用媒体查询来选择性地仅下载每个特定设备所需的图像。过去的结果表明，媒体查询只会尝试下载需要的图像，前提是可以合理地假设不需要某些图像。该页面底部的测试七似乎与您的问题非常相关。
您可以使用像素比媒体查询创建一个 CSS 文件并将其列在清单文件中，然后在设备上检查它是否实际下载了不必要的图像资源。