This is a good, comprehensive overview of the options for high-density web pages. However, I'm curious about their CSS media queries.

            device-pixel-ratio,
         -o-device-pixel-ratio,
       -moz-device-pixel-ratio,
    -Webkit-device-pixel-ratio { … }

I was under the impression that you should put the vendor-prefixed versions first, followed by the unprefixed one. (Also, I don't think "-Webkit-" should be capitalized, but I don't know if it matters.) To wit:

         -o-device-pixel-ratio,
       -moz-device-pixel-ratio,
    -webkit-device-pixel-ratio,
            device-pixel-ratio { … }