Detecting a retina display iPad with javascript - Stack Overflow

admin管理员组

文章数量:1305968

I'm having a problem detecting a retina iPad (and similar devices) using just screen.availWidth and window.devicePixelRatio. The problem is that iPhones and iPads give the number of dips for screen.availWidth whereas android devices seem to report the number of physical pixels so I can't reliably do screen.availWidth / window.devicePixelRatio to calculate if the screen is of a tablet size.

Is there some other DOM property I can use to help me?

edit - To sum up in a way which hopefully makes clear that the question isn't a duplicate

How can I tell if screen.availWidth reports a value that has already been adjusted to take account of window.devicePixelRatio

I'm having a problem detecting a retina iPad (and similar devices) using just screen.availWidth and window.devicePixelRatio. The problem is that iPhones and iPads give the number of dips for screen.availWidth whereas android devices seem to report the number of physical pixels so I can't reliably do screen.availWidth / window.devicePixelRatio to calculate if the screen is of a tablet size.

Is there some other DOM property I can use to help me?

edit - To sum up in a way which hopefully makes clear that the question isn't a duplicate

How can I tell if screen.availWidth reports a value that has already been adjusted to take account of window.devicePixelRatio

• javascript
• ipad
• retina-display
• device-detection

Share Improve this question Follow edited Mar 11, 2013 at 10:07 wheresrhys asked Mar 11, 2013 at 9:48 wheresrhyswheresrhys 23.6k2121 gold badges9696 silver badges165165 bronze badges 4

• possible duplicate of How to detect if iPhone has retina display or not? – Raptor Commented Mar 11, 2013 at 9:52
• @ShivanRaptor not exactly - devicePixelRatio reliably tells you whether it's a retina display, but doesn't necessarily tell you how many dips you have to work with – wheresrhys Commented Mar 11, 2013 at 9:53
• You can bine with detecting User Agent, which by default browser is telling you the device model – Raptor Commented Mar 11, 2013 at 9:55
• @Shivan_Raptor ... but this isn't future-proof – wheresrhys Commented Dec 4, 2013 at 9:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

That 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;
};

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)

1. measure window.devicePixelRatio and screen.availWidth

2. 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;
     }
   }
   

3. Append <div id="my-test-el"> to the page

4. 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./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./Modernizr/Modernizr/pull/1139. please upvote if you'd find it useful

This Modernizr plugin may help : Modernizr Retina : HiDPI Test

Note: Requires Modernizr's Media Queries feature

本文标签： Detecting a retina display iPad with javascriptStack Overflow