About HiDPI

[KittyGiraudel]

Two things :

1. The media query should trigger before reaching 2 pixel ratio; 1.3 is usually a fair choice;
2. The media query components should be the following:

@media (-webkit-min-device-pixel-ratio: 1.3),
       (min-resolution: 124.8dpi),
       (min-resolution: 1.3dppx) {
  @content;
}

From: https://github.com/kaelig/hidpi.

[davidtheclark]

Thanks for the input.

1. I believe this is already taken care of. 1.3 is the default ratio, and user can set whatever ratio they want as a variable: https://github.com/davidtheclark/scut/blob/v0.10.3/src/general/_hd-bp.scss. Or am I misunderstanding the issue?
2. I was going off the HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L194, with discussion here: Include a HiDPI closure in the sample media queries h5bp/html5-boilerplate#1127. Do you think this other source is more authoritative? Is there a reference you can recommend that explains the reasoning behind the method you're recommending?

[KittyGiraudel]

Well, I'd trust @kaelig over HTML5Boilerplate every single time. That being said, the media query is not directly from him but from here. It explains why the media query I provided in my last comment is more than enough.

[davidtheclark]

Interesting read. I do see this comment in that article:

If you want to support retina/high resolution devices that are running IE, you need to use the resolution media query and use dpi units. If you’re going to use the dpi unit, I don’t see much need to include the dppx unit as well. Everywhere the dppx unit is supported, the dpi unit is also supported.

So I'm not sure why @kaelig is including both dpi and dppx min-resolution values. Some belief about future friendliness?

Also, regarding -o-min-device-pixel-ratio: here http://mattmiklic.com/2012/11/18/making-sense-of-hidpi-media-queries/ @bjankord left a comment that the -o-prefixed rule was unnecessary, but the author responded:

Opera 12.10 does indeed support resolution, but it reports the wrong value. On my MacBook Pro with Retina Display, Opera only responds to min-resolution: 96dpi (or 1dppx), while it correctly responds to pixel ratios up to 2 with -o-min-device-pixel-ratio. So it looks like support for resolution is coming soon but still too buggy to rely on.

Opera 12? Maybe too old to worry about.

Yeah, this one is a mess. I don't know, though ... if the mixin I currently have supports more browsers (old Opera) with the same number of lines, I feel like may as well stick with it, right? (Only improvement would be to drop the -o- line if old Opera support weren't an issue -- only to drop that single line. Again, though, if it's what H5BP and Wordpress do, seems like it's not a bad idea, not a wasted line.)

[bjankord]

+1 to keeping your current mixin as is. The -o prefix may or may not be needed, just depends on how far back you want to support Opera on HiDPI devices. It's been a while since I did the research but leaving the -o doesn't hurt anything.

[davidtheclark]

Thanks for the input @bjankord. Closing this unless other considerations arise.