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.

Vector SVG icons
Do we have SVG files for Vector's icons? I'm only seeing png in skins/vector/images. --Cmelbye (talk) 23:54, 30 June 2012 (UTC)

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
 * Release versions do no yet support HiDPI on Mac desktop. (Take a nightly build and disable layers acceleration and you will see full hi-dpi stuff, but not all assets are updated).
 * Bug 674373 - (10.7) Support HiDPI mode on OS X Lion
 * -moz-device-pixel-ratio, min--moz-device-pixel-ratio BROKEN in CSS media queries on desktop
 * Bug 765914 - -moz-device-pixel-ratio misreported as 1.0 instead of 2.0 on Mac HiDPI display

Safari
 * Safari supports HiDPI modes on Mac, iPhone, and iPad.
 * -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio usable in CSS media queries

Chrome
 * Chrome latest Canary builds support HiDPI on Mac.
 * -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio usable in CSS media queries

Android
 * Android phones with 1.5x and 2x pixel ratios exist, but not yet tablets or PCs. At least 1.5x are rumored to be coming out at some point (an Asus Transformer variant with 1920x1080 screen is allegedly in the works)
 * -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio usable in CSS media queries

Internet Explorer
 * 1.4x and 1.8x scaling for Windows 8 Metro interface at some resolutions, can be tested in SDK simulator
 * CSS media queries may or may not work, check me.
 * Doesn't seem to support device-pixel-ratio, but you can use dpi in resolution
 * This makes a "ratio>1.0 -> use SVG if possible" rule seem kind of wise. :)