I have a web app which uses [media queries based on pixel ratio](http://cssforge.com/tutorials/designing-for-retina-css-media-queries-and-background-size/) to deliver images of an appropriate resolution to client devices. For example, it will deliver 1x images to a Windows desktop and 2x images to an iPhone with retina display.

I am interested in using the [HTML5 application cache feature](http://www.html5rocks.com/en/tutorials/appcache/beginner/) to enable my web app to be used offline. To do this you must create a manifest file that lists all the files needed by your app. When a user visits the app, the browser gets the manifest and downloads all the files listed in it, in preparation for going offline.

It sounds to me like this will negate the point of my media queries, as I will have to put both 1x and 2x images in the manifest, and all clients will end up downloading all images.

The main solution that comes to mind is to dynamically deliver the manifest, using user agent sniffing to decide whether the manifest should include 1x or 2x images. This is feasible for me but I am curious what other solutions are out there for dealing with this issue, or is it just a known limitation/quirk?