Include a HiDPI closure in the sample media queries #1127

Closed
Kroc opened this Issue Jun 19, 2012 · 17 comments

7 participants

@Kroc

So… I’ve finally come to the point where I want to use CSS to target a retina display now and there’s a distant lack of clear an up to date information on what is the best default way (which is what I consider H5BP) of targetting HiDPI devices.

H5BP should include a sample media query for HiDPI. I heard there's a new CSS standard so we don’t have to use only webkit-min-device-pixel-ratio, but I don’t know what to search for to find it. Do we use 1.5 or 2 for the ratio? I don’t know. These are answers H5BP should be answering for the great copy-paste masses :)

Edit: I have noticed that H5BP-mobile has some code, but lol, there is no such thing as a 'mobile-only' website; retina ipads are being used on desktop sites, at desktop resolutions already and new MacBookPro is retina also. The future of desktop is HiDPI too, so H5BP should include the media query too.

@mathiasbynens
H5BP member

This page has some more info: http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

Any objections to me adding the following to the main CSS file? @h5bp/html5-boilerplate

/* Target high-density displays */
@media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  ...
}

Updated as per @Kroc’s comments.

@Kroc

What about:

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

as from H5BP/mobile; though, with the addition of min-resolution: 1.5ddpx.

@Inkdpixels

Uhmm, why are you guys using *1.5 as the ratio? I thought to double the image resolution is the way to go for HDPI screens such as retina and stuff?

@media (-webkit-min-device-pixel-ratio: 2), /* Old webkit */
       (min-resolution: 2dppx)             /* Everyone else */ {
}
@mathiasbynens
H5BP member

@inkdpixels 1.5 applies to iPads, and possibly other devices.

@kremalicious

@Inkdpixels there's a lot more between 1 and 2, especially in the Android world. For instance, 1.5 targets all hdpi Android devices whereas 2 only targets xdpi devices. See here or the Android reference for more on those density categories.

@necolas
H5BP member

Yeah, would be sensible to include a good template in HTML5BP. This project isn't just for "desktop", it should have as wide a range as possible. Happy for people to work out what is best to include for this issue.

@mathiasbynens
H5BP member

According to http://girliemac.com/blog/2012/08/03/resolution-in-media-queries/, this is all that’s needed:

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    /* some hi-res css */
}

On current mobile browsers, this shorter media-queries work on WebKits (Safari, Chrome, Android, MeeGo/Nokia, Dolphin etc.) and Firefox, Opera and IE9+! (Edit: IE9 does recognize the resolution, however, it may recognize its value wrongly. e.g. Lumia 800 has the screen resolution of 480×800, while CSS pixel width of 320px, but the CSS resolution value is recognized as 96dpi, instead of 144dpi. I need to investigate with other devices also with IE10 when I can!)

@necolas necolas added a commit that closed this issue Aug 18, 2012
@necolas necolas Add a HiDPI example media query
`-webkit-device-pixel-ratio` targets WebKit browsers.
`min-resolution` targets everything else.

Reference: http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

Fix gh-1127
28f922f
@necolas necolas closed this in 28f922f Aug 18, 2012
@marcedwards

Some more info that might be helpful, as I've been investigating this stuff a bit.

If you'd like to target these devices:

  • Retina iOS devices
  • Retina Macs running Safari
  • High DPI Windows PCs running IE 8 and above
  • Low DPI Windows PCs with IE zoomed in
  • Android hdpi devices and above
  • Android tvdpi devices, including Google Nexus 7
  • Chrome running on high DPI Macs and PCs

...then you're best setting a threshold at 1.3 for device pixel ratio. Something like this:

@media  only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (min-device-pixel-ratio: 1.3),
    only screen and (min-resolution: 120dpi)

This works well because the threshold for:

  • all Retina Macs, iPads and iPhones is -webkit-min-device-pixel-ratio: 2.
  • tvdpi Android devices is -webkit-min-device-pixel-ratio: 1.3125.
  • hdpi Android devices is -webkit-min-device-pixel-ratio: 1.5.
  • xhdpi Android devices is -webkit-min-device-pixel-ratio: 2.

Internet Explorer / Windows uses min-resolution instead. Windows 8 and Windows Phone have 3 scale targets: 100%, 140%, 180%. Windows 7 and prior have 3 DPI settings targets: 96dpi (100%), 120dpi (125%) and 144dpi (150%). That means there's a few important thresholds:

  • 100% scale is min-resolution: 96dpi
  • 125% scale is min-resolution: 120dpi
  • 140% scale is min-resolution: 134dpi
  • 150% scale is min-resolution: 172dpi
  • 200% scale is min-resolution: 192dpi

Internet Explorer also changes the dpi based on zoom level, so I believe a zoom level of 200% on a setup with the 96dpi setting would be seen as 192dpi (I haven't tested that). Worth noting that for IE "96dpi" is considered to be the native 1:1 pixel mapping to the display, even if the display isn't actually 96dpi.

I've set up a page for testing the devices/browsers: http://bjango.com/articles/min-device-pixel-ratio/

@drublic
H5BP member

Thanks for the research, Marc. To be fair I don't have the devices to test this at hand. But your test seem to work pretty good, at least on my iPhone and Mac.
It seams to be sensible to use a min-device-pixel-ratio of 1.3 to target Android tvdpi devices. (Can anyone else test this?)
As it does not affect other devices I'd be good to go with 1.3 instead of 1.5. Any other thoughts?

@marcedwards

I don't have many test devices here either, but friends and acquaintances over Twitter were able to load the site and send back the results. I guess the main devices in question are the Nexus 7 and possibly a hdpi Android phone. Should be easy to find someone with those to double check the results.

@necolas
H5BP member

We should reevaluate the example we use in light of:

http://core.trac.wordpress.org/changeset/22629

@necolas necolas reopened this Nov 18, 2012
@marcedwards

Here are the differences:

-o-min-device-pixel-ratio: 5/4
vs
-o-min-device-pixel-ratio: 13/10)

5/4 = 1.25
13/10 = 1.3

-webkit-min-device-pixel-ratio: 1.25
vs
-webkit-min-device-pixel-ratio: 1.3)

Which device on the market has a device-pixel-ratio of 1.25 or under, but not 1.0? I don't know of any. tvdpi on Android is 1.3125, so that will be captured with a threshold of 1.25 or 1.3.

So while WordPress' CSS is great, I don't thing it'll matter in practice. Also, they don't seem to have min-device-pixel-ratio without a browser prefix. I wonder if there's a reason for that?

Since writing the CSS a few posts above, the only change in the market I'm aware of is xxhdpi for Android, which is 480PPI (and definitely above device-pixel-ratio of 1.3!).

More info on xxhdpi:
http://developer.android.com/reference/android/util/DisplayMetrics.html#DENSITY_XXHIGH

@necolas
H5BP member

they don't seem to have min-device-pixel-ratio without a browser prefix. I wonder if there's a reason for that?

same reason we don't. not needed.

@marcedwards

Is that because it doesn't add support for any current devices, or because min-device-pixel-ratio isn't going to be part of the CSS spec?

I thought it was best practice to include non-prefixed code to allow for a time when the prefix isn't needed?

@Inkdpixels

'min-device-pixel-ratio' was never part of the spec I think, at least it was officialy dropped in favor of 'min-resolution' a few months ago. More info on this here: http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

@marcedwards

Ah ok, makes sense. As you were.

@necolas necolas added a commit that referenced this issue Dec 28, 2012
@necolas necolas Update HiDPI CSS `@media` rule
Provide greater cross-browser support. Thanks to Wordpress -
http://core.trac.wordpress.org/changeset/22629 - and @marcedwards - see
issue #1127.
1987e5a
@necolas
H5BP member

Thanks marc! Updated HiDPI in 1987e5a

@necolas necolas closed this Dec 28, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment