Geek Answers Handbook

Detecting iPad retina display using javascript

I have a problem detecting the retina of an iPad (and similar devices) using only screen.availWidth and window.devicePixelRatio . The problem is that iPhones and iPads give the number of dips for screen.availWidth , while Android devices seem to report the number of physical pixels, so I cannot reliably make screen.availWidth / window.devicePixelRatio to calculate if the screen has tablet size.

Is there any other DOM property that I can help you with?

edit - To summarize in a form that we hope makes clear that the question is not a duplicate

How can I find out if screen.availWidth reports a value that has already been configured to account for window.devicePixelRatio

+4
source share
3 answers

I have not tested this, but here is an approach that I think might work. I will do jsbin for him when I get the time.

Since all devices (as far as I know) are configured for devicePixelRatio before passing values ​​to CSS media requests, we can (in a bit of pseudo-code)

  • measure window.devicePixelRatio and screen.availWidth

  • Write a style tag in the head that includes a media query something like this:

     #my-test-el { display: none; visibility: visible; } @media screen and (min-device-width:screen.availWidth) { #my-test-el { visibility: hidden; } }

  • Add <div id="my-test-el"> to the page

  • Read attribute style.visibility . If it is equal to hidden, then the css value will be the same value as screen.availWidth => screen.availWidth was pre-configured for dpr.

edit It works! http://jsbin.com/IzEYuCI/3/edit . I can also add the modernizr plugin.

edit And here is the receive request to get it in Modernizr - https://github.com/Modernizr/Modernizr/pull/1139 . please support if you find it useful

+1
source

This should help

 var retina = (window.retina || window.devicePixelRatio > 1);

UPDATE

 Retina.isRetina = function(){ var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\ (min--moz-device-pixel-ratio: 1.5),\ (-o-min-device-pixel-ratio: 3/2),\ (min-resolution: 1.5dppx)"; if (root.devicePixelRatio > 1) return true; if (root.matchMedia && root.matchMedia(mediaQuery).matches) return true; return false; };
+3
source

This Modernizr plugin can help: Modernizr Retina: HiDPI Test

Note. Requires Media Reviews.

0
source

More articles:


All Articles