New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include a HiDPI closure in the sample media queries #1127

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

Comments

Projects
None yet
7 participants
@Kroc

Kroc commented Jun 19, 2012

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 comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jun 19, 2012

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.

Member

mathiasbynens commented Jun 19, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Kroc

Kroc Jun 19, 2012

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.

Kroc commented Jun 19, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Inkdpixels

Inkdpixels Jun 19, 2012

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 */ {
}

Inkdpixels commented Jun 19, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jun 19, 2012

Member

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

Member

mathiasbynens commented Jun 19, 2012

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

@kremalicious

This comment has been minimized.

Show comment
Hide comment
@kremalicious

kremalicious Jun 20, 2012

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

kremalicious commented Jun 20, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Jul 7, 2012

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.

Member

necolas commented Jul 7, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Aug 4, 2012

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

Member

mathiasbynens commented Aug 4, 2012

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

This comment has been minimized.

Show comment
Hide comment
@marcedwards

marcedwards Aug 30, 2012

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/

marcedwards commented Aug 30, 2012

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

This comment has been minimized.

Show comment
Hide comment
@drublic

drublic Sep 30, 2012

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?

Member

drublic commented Sep 30, 2012

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

This comment has been minimized.

Show comment
Hide comment
@marcedwards

marcedwards Oct 1, 2012

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.

marcedwards commented Oct 1, 2012

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Nov 18, 2012

Member

We should reevaluate the example we use in light of:

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

Member

necolas commented Nov 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@marcedwards

marcedwards Nov 18, 2012

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

marcedwards commented Nov 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Nov 18, 2012

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.

Member

necolas commented Nov 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@marcedwards

marcedwards Nov 18, 2012

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?

marcedwards commented Nov 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Inkdpixels

Inkdpixels Nov 19, 2012

'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/

Inkdpixels commented Nov 19, 2012

'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

This comment has been minimized.

Show comment
Hide comment
@marcedwards

marcedwards Nov 19, 2012

Ah ok, makes sense. As you were.

marcedwards commented Nov 19, 2012

Ah ok, makes sense. As you were.

necolas added a commit that referenced this issue Dec 28, 2012

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.
@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Dec 28, 2012

Member

Thanks marc! Updated HiDPI in 1987e5a

Member

necolas commented Dec 28, 2012

Thanks marc! Updated HiDPI in 1987e5a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment