CSS and JS to detect a retina display. #css #javascript #retina #responsive

gistfile1.html

<style>
/* from http://www.mobilexweb.com/blog/ios-5-1-new-ipad-web-developers */
@media screen and (-webkit-device-pixel-ratio: 2) {
    /* retina display */
}
</style>

<script>
// from https://developer.mozilla.org/en/DOM/window.matchMedia
if (window.matchMedia("(-webkit-device-pixel-ratio: 2)").matches) {
  /* retina display */
}
</script>

Actually, in JavaScript, window.devicePixelRatio is a safer alternative.
(See: http://caniuse.com/#feat=devicepixelratio vs. http://caniuse.com/#feat=css-media-resolution)

<script>
if (window.devicePixelRatio > 1) {
  /* highDPI display */
}
if (window.devicePixelRatio >= 2) {
  /* retina display */
}
</script>

But window.devicePixelRatio is not very reliable on mobile devices ?

See also https://gist.github.com/marcedwards/3446599