Retina display support landed in Firefox nightly

Firefox bug 674373 has landed; Firefox nightly builds now natively support the Retina MacBook Pro display!

It also now supports the window.devicePixelRatio interface which my in-progress high-DPI image support for MediaWiki uses to determine which resolution images to load. It looks great on my Retina MacBook Pro! This should land in the final Firefox 18 release in a couple months for those not on the bleeding edge of the upgrade treadmill.

Unfortunately there’s a bug which causes window.devicePixelRatio to report an incorrect value on Android, so hi-dpi support for Firefox mobile is slightly broken pending bugs 794056 and 779527.

Responsive images for high-DPI displays in MediaWiki

I’ve been working on support for natively showing suitable images for high-DPI displays in MediaWiki, starting with basic content images.

On desktops and tablets there’s just a few devices like the Retina MacBook Pro that need this, but in the mobile world there are loads of devices at 1.5x or 2.0x the traditional resolutions.

You can see a live demo of this patch in action on these test articles:

Here are some screenshots from an iPhone 5 simulator showing fragments of the San Francisco Wikipedia article as currently displayed on and with my responsive images patch…

These maps are absurdly sharper on the right side:

And this photograph is visibly much sharper on the right, showing detail of the building’s texture and patterns that wasn’t previously visible without clicking through to the detail page:

The current version of the patch uses the ‘srcset’ attribute as defined in the current HTML 5 working group version, only using the density options and not the width/height options. Since browsers don’t yet support this, I also include some JavaScript to check the display density and load the appropriate image from the srcset.

Patch in gerrit:

The current version has been tested with a number of devices and browsers, including:

  • iPhone 3Gs, Safari (low-res 1x)
  • Nexus One, Android browser (medium-res 1.5x)
  • iPod 5th-generation, Safari (high-res 2.0x)
  • Galaxy Nexus, default browser (high-res 2.0x)
  • Galaxy Nexus, Chrome (high-res 2x)
  • Galaxy Nexus, Opera Mobile (high-res 2x)
  • BlackBerry 10 dev alpha, default browser (high-res 2x)

And on a Retina MacBook Pro:

  • Mac OS X, Safari (2x)
  • Mac OS X, Chrome (2x)
  • Windows 8, IE desktop (2x, with desktop zooms set to 200%)
  • Windows 8, IE Metro (2x)

and on an 11″ 1366×768 Windows 8 tablet:

  • Windows 8, IE Metro (1.5x)

Currently unsupported:

  • Opera Mini (we don’t serve any JS)
  • Firefox (can’t yet detect resolution)
  • Windows Phone IE (can’t yet detect resolution)