我有一个网络应用，它使用media queries based on pixel ratio向客户端设备提供适当分辨率的图像。例如，它会将1x图像传送到Windows桌面，将2x图像传送到带有视网膜显示器的iPhone。
我有兴趣使用HTML5 application cache feature启用我的网络应用离线使用。为此，您必须创建一个清单文件，列出您的应用程序所需的所有文件。当用户访问该应用程序时，浏览器将获取清单并下载其中列出的所有文件，以准备脱机。
我觉得这样会否定我的媒体查询，因为我必须在清单中放入1x和2x图像，所有客户端最终都会下载所有图像。
想到的主要解决方案是动态传递清单，使用用户代理嗅探来确定清单是否应包含1x或2x图像。这对我来说是可行的，但我很好奇有什么其他解决方案来处理这个问题，还是只是一个已知的限制/怪癖？
答案 0 :(得分：0)
我有一种预感，您可以使用媒体查询有选择地仅下载每个特定设备所需的图像。结果已经显示media queries will only attempt to download images that are needed，如果认为不需要某些图像是合理的。该页面底部的测试七似乎与您的问题非常相关。
您可以使用像素比媒体查询创建一个CSS文件，并将其列在清单文件中，然后检查设备是否实际下载了不必要的图像资源。
答案 1 :(得分：0)
我自己解决了同样的要求，我为此创建了一个快速中间件，打算使用或不使用AppCache和/或Cordova，支持prefix-dpi-suffix（例如file@2x.jpg）语法
您可以将它与内容图片，包含媒体查询的css文件或其他任何文件一起使用，只需将@ [num] x添加到您的文件中，它将代替＆＃34; normal＆＃34;文件（您可以使用自己的前缀和后缀字符串）。
这意味着当浏览器在设备像素比为2的设备上请求名为mypic.png的文件时，中间件实际上会首先尝试提供mypic@2x.png，并且只有在它不存在的情况下才会提供服务，它将服务于mypic.png。
使用Service Workers可以实现更优雅的解决方案，目前并非所有浏览器都支持。