[prev in list] [next in list] [prev in thread] [next in thread] 

List:       wikitech-l
Subject:    Re: [Wikitech-l] Initial stab at responsive images for high-density displays
From:       Brion Vibber <brion () pobox ! com>
Date:       2012-09-27 22:45:54
Message-ID: CAFnWYT=h2d84p1whYLfOCEWKYL6ovPJu=tWw=58iQgKGMSJVZw () mail ! gmail ! com
[Download RAW message or body]

On Sun, Sep 23, 2012 at 7:59 PM, Brion Vibber <brion@pobox.com> wrote:

> I've updated the patch to use the 'srcset' attribute as defined in the
> current HTML 5 working group version, only using the density options and
> not the width/height options:
>
> http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset
>
> Patch in gerrit:
> https://gerrit.wikimedia.org/r/#/c/24115/ (core)
> https://gerrit.wikimedia.org/r/#/c/24147/ (MobileFrontend)
>

Patch has been updated to:
* include QUnit tests for the srcset matching
* match "next-highest density" if there's not an exact match available

This latter fixes Opera Mobile on my Galaxy Nexus (where devicePixelRatio
reports 2.25 rather than the expected 2) and BlackBerry 10 developer alpha
device (where it reports slightly less than 2.25). Should help with some
other funky configurations where a non-integral zoom is reported as well.

Currently Firefox for Android doesn't report window.devicePixelRatio, I may
add another special case, should be able to use media queries.

Opera Mobile works, but Opera Mini does not -- at least because we don't
serve it jQuery etc. :)

You can see a live demo of this patch in action on these test articles:
* http://leuksman.com/mw/index.php/San_Francisco
* http://leuksman.com/mw/index.php/Lens_(optics)

Mobile browsers won't automatically switch to mobile view on this wiki
currently, so hit the 'mobile view' link manually to switch in.

-- brion
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
[prev in list] [next in list] [prev in thread] [next in thread]