HiDPI display support

High resolution; HiDPI; Retina Display(TM), whatever you call it.... it's here.

Apple is now shipping a MacBook Pro with a 2880x1800 display which renders text beautifully, at twice the horiz & vertical resolution of classic displays. We've already seen this in the mobile world with the iPhone 4 and iPad 3, but it's going to get harder to ignore now that it's hitting laptops.

Skin chrome
CSS media queries could be used in various places to load higher-resolution icons. Switching to SVG would be the most ideal, but browser compat isn't quite there yet. Use of a media query and background-size should do it in most cases with larger PNGs.

Site logos
Site logos are the biggest low-hanging fruit: it's relatively isolated and since it's on every page and large, it's visible.

Logo is set with inline CSS; with some trickery we could change to a tag and use media queries to load a high-res version if available.

Math
The optional MathJax rendering mode uses real text-rendering and looks great in HiDPI modes. However, it is not yet the default mode.


 * fix bugs
 * set MathJax as default rendering mode?

It's also possible we could render 2x images from texvc, and use JS or CSS to slurp in the higher-res image. But this is less desirable.

Inline images
Photos generally still look ok pixel-doubled, but may not be as sharp as one would like.

Diagrams can look awful pixel-doubled, and would definitely benefit from being viewed at higher resolution.

In theory, for SVG diagrams we can serve the SVG instead of the PNG rasterization. How best to do it without losing compatibility remains an open question.

Diagrams in PNG or other raster formats would need to have higher-resolution versions shown. How best to do that is still an open question.

Browser compatibility
Firefox does not yet support HiDPI modes on Mac OS X; this is being worked on.

Safari supports HiDPI modes on Mac, iPhone, and iPad, and uses the various webkit-prefixed goodies such as -webkit-device-pixel-ratio

Chrome latest Canary builds support HiDPI, have not yet tested the media queries etc.

Android phones with 1.5x and 2x pixel ratios exist, but not yet tablets or PCs. Webkit blah blah.