Include a HiDPI closure in the sample media queries

[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]

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]

@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]

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]

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!)

[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]

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]

We should reevaluate the example we use in light of:

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

[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]

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]

Thanks marc! Updated HiDPI in 1987e5a