Using html5 appcache with media queries for pixel ratio

I have a web application that uses pixel-based multimedia queries to deliver images of the appropriate resolution to client devices. For example, it will deliver 1x images to the Windows desktop and 2x images to the iPhone with a retina display.

I am interested in using the HTML5 application cache feature to enable my web application offline. To do this, you must create a manifest file that lists all the files your application needs. When a user visits the application, the browser receives the manifest and downloads all the files listed in it, in preparation for going offline.

It sounds like it is denying my media queries, since in the manifest I will need to display both 1x and 2x images, and all clients will download all the images.

The main solution that comes to mind is to dynamically deliver the manifest using the sniff of the user agent to decide whether the manifest should include 1x or 2x images. This is possible for me, but I'm curious what other solutions exist to solve this problem, or is it just a known limitation / quirk?

+4
source share
2 answers

, - , . , - , , . , -, .

CSS - , , .

0

, , AppCache / Cordova, prefix-dpi-suffix (, file@2x.jpg).

, css , , , @[num] x , ( ).

, mypic.png 2, mypic@2x.png, , mypic.png.

static-denser

static-denser-demo


Update

Service Workers, .

http://caniuse.com/#feat=serviceworkers

0

All Articles