High Res device test re: #441

[matthewlein]

Test for high res devices

!!(window.devicePixelRatio > 1.5)

I don't have a slew of devices, but fails my desktop and passes on my iPod touch.

For doing fancy css like this:
http://bradbirdsall.com/mobile-web-in-high-resolution

[paulirish]

This'll need to go into a new file in the feature-detects folder using the addTest() api

i'd also love if you could drop in a few of the links found here https://www.google.com/?q=%22devicePixelRatio%22

probably including brads.

thxx

[matthewlein]

I'm happy to do that...but I don't really understand how a test file is added. I don't think it works in its current state, something must be missing.

I would suggest a quick How To Contribute wiki page. It can't be more than 4 or 5 steps, but I'm just not seeing it.

[ryanseddon]

One thing you may want to test is firefox mobile which doesn't support window.devicePixelRatio but does support the media query equivalent -moz-device-pixel-ratio and the awkwardly named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio.

So you could use Modernizr.mq('only screen and (min--moz-device-pixel-ratio:1.5)')) if checking devicePixelRatio fails. The emulator defaults to 1.0 pixel ratio but I found a mention that android has 1.5.

[matthewlein]

aww dang. I'll be flying/coding blind for FF mobile.

I'll try to cook up a !window.devicePixelRatio that uses all the prefixes of device-pixel-ratio but I will have no way of testing broadly.

[paulirish]

I can doublecheck FF mobile when this is updated.

[matthewlein]

okie doke. got @ryanve 's better version in there. Sadly now I am not the author of this test. Curator at best :(

[ryanve]

@matthewlein Inspired by at least ;)

[matthewlein]

OK duders, let's focus on getting this released to the eager masses, then you guys can golf it down to your heart's content. Can someone confirm FF mobile and, if good, merge?

[paulirish]

if someone can make jsbin with this test i can look at it on ff mobile

[matthewlein]

done and done
http://jsbin.com/oziboj/4

[ryanve]

@paulirish @matthewlein Here try this jsbin.com/elogax/11/edit. I haven't done any sites where I based anything on device-pixel-ratio. If you are then something like this might also be useful: jsbin.com/oxequh/5/edit.

[ryanve]

@matthewlein I didn't see that you just done'd it ;)

[matthewlein]

with the ipad high res buzz...it might be nice to roll this in soonish (when you get back from SXSW).

[paulirish]

FF mobile beta

http://jsbin.com/oziboj/4 : false
http://jsbin.com/elogax/11/edit: false
http://jsbin.com/oxequh/5/edit : ...

    window.devicePixelRatio: undefined
    Modernizr.dpr(): 1
    Modernizr.dpr(1): true
    Modernizr.dpr(1.5): false

[staabm]

http://jsbin.com/oziboj/4 is true on the 3rd ipad

[paulirish]

@matthewlein plz verify the above results are correct.

also what's with //var ? some crazy code style there..

if these results are good, we'll pull this (minus that whack style :)

[matthewlein]

OK, so here's what I learned today.

FF mobile gives these:
false: Modernizr.mq('only screen and (min--moz-device-pixel-ratio:1.1)')
true: Modernizr.mq('only screen and (min--moz-device-pixel-ratio:0.9)')
which means it thinks its 1.0, on a high res galaxy nexus which passes a 1.5 check in default browser.

Opera Mini uses ratios only like 3/2 (not numbers like 1.5), and fails 3/2 but passes 2.99/2:
false: Modernizr.mq( 'only screen and (-o-min-device-pixel-ratio: 3/2)' )
true: Modernizr.mq( 'only screen and (-o-min-device-pixel-ratio: 2.99/2)' )
And outputs window.devicePixelRatio = 1 at the same time. Which means window.devicePixelRatio seems wrong so we can't use it in the detect. Opera Mobile (emulator) appears to not have that problem, but Mini does.

Bin with that test info:
http://jsbin.com/uhilel/2

So my latest version uses only media queries, and sets the number = 1.499 and ratio = 2.99/2 to cover inconsistancies with matching.

I can verify these:

iPod Safari: true
iPod Opera Mini: true
Galaxy Nexus FF mobile : false
Galaxy Nexus Webkit : true

And here's a bin with the latest code for testing other devices http://jsbin.com/oziboj/25/

[ryanve]

@paulirish The technical name for that is Autonomous Semicolon Assertion. ; ) It can be useful if you don't want to put semicolons at the end of a line and also don't want code checking tools to complain.

[paulirish]

@ryanve what tools parse //var as something and imply meaning about your ASI from it?

[ryanve]

@paulirish Oh I just meant the ; and not the //var. No tools scan for that (at least none I've seen). Putting some sort of comment there makes sense if you have lots of declarations (more than you what you can see in one fold) combined into one statement, like to emphasize "we're done with that big list of declarations and moving on."

The only checkers I know about are the compiler, jslint and jshint. You know any others? From the web I find jslint easier to use than jshint. One day I should figure out how to use jshint better.

[paulirish]

i see. you're just using //var as a way to indicate you've finished a long
var declaration, so you dont have to look up so high. kk.

that's it. hmmm.. what do you think is easier about jslint vs jshint?

[ryanve]

Theoretically jshint is awesomer but I think it takes too long to set the options. There's also something traumatizing about the red bar that appears when there are errors. The new jslint has that too but it doesn't have the same effect.

I wish both of them had links next to the errors to let you "ignore errors like these" rather than having to figure out which option pertains to which error, and they should group the errors by severity rather than line so that it'd be easier to scan.

[paulirish]

over in h5bp/html5-boilerplate#1127 this discussion continues

[paulirish]

Based on http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/ I'm not convinced we are testing the right thing here.

[matthewlein]

Here's a fiddle that I think tests the different options

http://jsfiddle.net/matthewlein/MRy33/

I'm seeing some undesirable results on desktops. Webkit fails (as expected), FF doesn't seem to accept dppx (and dpi might introduce more problems, as cited in article), Opera gives false positives.

FF:
min-resolution: 1dpi: true
min-resolution: 72dpi: true
min-resolution: 96dpi: true
min-resolution: 196dpi: false
min-resolution: 0.5dppx: false
min-resolution: 1.0dppx: false
min-resolution: 1.5dppx: false
Modernizr.highres: false
Modernizr.lowres: true

Opera:
min-resolution: 1dpi: true
min-resolution: 72dpi: true
min-resolution: 96dpi: true
min-resolution: 196dpi: true
min-resolution: 0.5dppx: true
min-resolution: 1.0dppx: true
min-resolution: 1.5dppx: true
Modernizr.highres: false
Modernizr.lowres: true

on my iPod, webkit failing as expected.

Opera Mini:
min-resolution: 1dpi: true
min-resolution: 72dpi: true
min-resolution: 96dpi: true
min-resolution: 196dpi: true
min-resolution: 0.5dppx: true
min-resolution: 1.0dppx: true
min-resolution: 1.5dppx: true
Modernizr.highres: true
Modernizr.lowres: true

Did I mess something up? Can anyone find an example of dppx working?

If not, the current test might be as good as we can do for now, then you can roll in resolution as when it works as expected.

[matthewlein]

relevant from ppk: http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

[ryanseddon]

As of ff16 they've dropped the silly min--moz-device-pixel-ratio in favour of the min-resolution using the dppx unit.

https://developer-new.mozilla.org/en-US/docs/CSS/Media_queries#-moz-device-pixel-ratio

I'd say a good test would be to first check min-resolution then try the other prefixed properties.

[stationkeeping]

What happened with this? Has the idea been abandoned?

[matthewlein]

I don't have the means (aka phones) to test it thoroughly on my own so I couldn't finish it up.

I have seen much simpler versions recently. These 2 are recent and similar
http://css-tricks.com/snippets/css/retina-display-media-query/
https://gist.github.com/marcedwards/3446599

Modifying my original one, this might work for you. Its based on a 1.5 as the threshold for hi res.
http://jsfiddle.net/matthewlein/HRbS8/

Even if its not pulled into the repo, you can still drop it into your code and it might solve all your problems. Or most of them, or enough for now.

[stucox]

Might be easier to raise a new PR if we do want to include this – the codebase has changed quite a lot and it would need to be in the v3 format.

A few thoughts:

• There are devices now which use 1.0, 1.3, 1.5, 2.0 and 3.0 (source)
• "> 1.499" starts to feel like a fairly arbitrary cut-off
• Does treating anything above 1.499 as "highres" make sense for real applications?
  • @matthewlein's original use case doesn't really work on non-integer ratios, and probably wants different styles for 2.0 and 3.0 respectively
  • For responsive images, double-res probably doesn't cut it on a 3x density screen, and a triple-res image would waste bandwidth for a 1.5 screen
  • ... other use cases?
• What's the real issue here? Just standardising the window.devicePixelRatio / MQ APIs? Is that Modernizr's job?

[matthewlein]

Yea, it probably should not be rolled in.

At the time it made sense since things were 1x or 2x, and now its the wild west and that won't change until everything is beyond the human eye's capacity.

Agreed that 1.5 is arbitrary and over time will become the norm and will be perceived as low res. Although I hate the idea, some people might want low, medium, high, and more resolution break points, so hi/low isn't enough.

And I don't see much of a reason to use a class instead of a dedicated media query in your stylesheets. In fact I would probably prefer to have all the 1.5 or 2 or 3.0 res styles together in once place instead of scattered all over.

It's mildly useful for someone as a reference point if they want to make their own test(s) to include custom classes.

But I say...close'r down.

[stucox]

Cool, thanks Matthew.