I haven't tested this, but here's an approach I think might work. I'll do a jsbin for it when I get time.
Because all devices (to the best of my knowledge) adjust for devicePixelRatio before passing the value to CSS media queries we can (in slightly pseudo code)
measure
window.devicePixelRatio
andscreen.availWidth
Write a style tag to the head which includes a media query something like the following
#my-test-el { display: none; visibility: visible; } @media screen and (min-device-width:screen.availWidth) { #my-test-el { visibility: hidden; } }
Append
<div id="my-test-el">
to the page- Read off the
style.visibility
attribute. If it equals hidden then the css value is the same value as screen.availWidth => screen.availWidth has been preadjusted for dpr.
edit It works! http://jsbin.com/IzEYuCI/3/edit. I'll put together a modernizr plugin too
edit And here's the pull request to get it in Modernizr - https://github.com/Modernizr/Modernizr/pull/1139. please upvote if you'd find it useful