[wp-trac] [WordPress Trac] #22238: HiDPI support for non-webkit browsers

[WordPress Trac]

#22238: HiDPI support for non-webkit browsers
----------------------------+------------------------------
 Reporter:  dd32            |       Owner:
     Type:  enhancement     |      Status:  new
 Priority:  normal          |   Milestone:  Awaiting Review
Component:  Administration  |     Version:
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |
----------------------------+------------------------------

Comment (by iammattthomas):

 I recently did some work on this for WordPress.com, and my findings may be
 relevant here. Specifically:

 - The moz--min-device-pixel-ratio selector isn't required, as far as I
 could tell. The only version of Firefox that responds to it is version 19
 (currently in nightly builds), and that browser also supports the min-
 resolution selector.

 - Specifying a pixel ratio of 1.25 instead of 1.5 serves 2x images to
 1.25x Android devices like the Nexus 7. While Firefox and Opera will
 respond to a 1.5 pixel ratio media query on the Nexus 7, the default
 browser (Chrome) will not, so 1.25 is required.

 - Both versions of Opera on Android support the min-resolution selector,
 but Opera Mini does not support the dppx unit, so the dpi unit is
 required.

 Based on this, the syntax we're now using on WordPress.com is:

 {{{
 @media print,
   (-o-min-device-pixel-ratio: 5/4),
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 120dpi) {
     div {
         background-image: url(i/logo-2x.png);
     }
 }
 }}}

 You can find my test page at http://dev.mattnt.com/retina.html and the
 breakdown of results at http://dev.mattnt.com/retina-results.html

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/22238#comment:5>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software