Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Detect retina support. Tested on iOS, Android 2.x, Chrome for Android, Safari on MacBook Pro Retina, Firefox mobile (beta) for Android, Opera Mobile (Android)
function isRetina(){
return (('devicePixelRatio' in window && devicePixelRatio > 1) ||
('matchMedia' in window && matchMedia("(min-resolution:144dpi)").matches))
}
@madrobby

This comment has been minimized.

Copy link
Owner Author

madrobby commented Jul 22, 2012

This should work on all browsers that support retina screens. Is this enough? Improvements welcome. This is for inclusion in my ebook http://retinafy.me

@ryanseddon

This comment has been minimized.

Copy link

ryanseddon commented Jul 22, 2012

Would be worth pooling knowledge in this pull request for high DPI detection Modernizr/Modernizr#443

@mathiasbynens

This comment has been minimized.

Copy link

mathiasbynens commented Jul 23, 2012

Is -moz-device-pixel-ratio:1.0 really high-resolution? Shouldn’t that be 1.5? Or perhaps 1.1 or something, as the other check is for > 1.

@madrobby

This comment has been minimized.

Copy link
Owner Author

madrobby commented Jul 24, 2012

@mathiasbynens good catch, that should be a !...

@madrobby

This comment has been minimized.

Copy link
Owner Author

madrobby commented Jul 30, 2012

I have updated the gist and moved away from the moz-specific check and test for min-resolution:144dpi. This works on Firefox (beta) on the Nexus 7, where as all other approaches (moz--min-device-pixel-ratio and min-resoution:1.5dppx) didn't.

@noamtm

This comment has been minimized.

Copy link

noamtm commented Aug 29, 2012

Also works on Chrome on MacBook Pro Retina (where window.devicePixelRatio==2).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.