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.

Current support
As of 1.21, the $wgResponsiveImages setting controls generation of additional image thumbnails for links at 1.5x and 2x the requested resolution, which are put into a   attribute on the   tag, a new part of the HTML 5 draft spec.

Compatibility JavaScript is used to check the device resolution and load up the higher-resolution images; if native  support is used this JS is skipped and things should work automatically. This can be tested on high-DPI laptop systems with a nightly WebKit with srcset support; native support should reach release browsers later in 2013 or early 2014.

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 1.5x and 2x images from texvc, and use.

Browser compatibility
Firefox
 * Release versions now support HiDPI on Android, and Mac and Windows 8 desktop. (Manual adjustment in about:config works on Linux as well.)
 * -moz-device-pixel-ratio, min--moz-device-pixel-ratio in CSS media queries

Safari
 * Safari supports HiDPI modes on Mac, iPhone, and iPad.
 * -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio usable in CSS media queries
 * window.devicePixelRatio works as expected, returning 1 or 2 as appropriate
 * beware that on Mac, the ratio can change over time! Currently we are ignoring this and only checking it once.
 * Native srcset support is in development WebKit builds.
 * this also only seems to take effect at load time, switching screens requires a reload to refetch the right images

Chrome
 * Chrome supports HiDPI on Mac, Android, and iOS.
 * -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio usable in CSS media queries
 * window.devicePixelRatio works as expected on Mac.
 * WebKit's new native srcset support may get copied over to Blink engine.

Android classic browser
 * Android phones and tablets with 1.33x, 1.5x and 2x pixel ratios exist
 * -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio usable in CSS media queries
 * window.devicePixelRatio works

Internet Explorer - Windows
 * 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. :)
 * currently using window.msMatchMedia to do media query checks, just checking >= 144 (1.5+) and >= 196 (2+)

Internet Explorer - Windows Phone
 * no window.devicePixelRatio
 * no window.msMatchMedia
 * can assume that all Windows Phone 7 devices are 1.5x though...
 * Windows Phone 8 supports both 1.5x and 2.0x-ish resolutions. And it should have IE 10, which should support window.msMatchMedia, so... hopefully it'll "just work" and we can leave WP7 as-is.

BlackBerry 10
 * reports window.devicePixelRatio of approximately 2.25 (slightly less on my dev alpha, at least)