What is the best way to detect retina support on a device using JavaScript?

by

According to everything that I’ve read recently, browsers seem to be moving towards the resolution media query expression. This is instead of device-pixel-ratio that is being used in the currently accepted answer. The reason why device-pixel-ratio should only be used as a fallback is because it is not a standard media query.

According to w3.org:

Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio.

View Full Article

Resolution Media Query Documentation

Since resolution is standardized and therefore the future let’s use that first in the detection for future proofing. Also because I’m not sure if you want to detect only high dppx devices or only retina(Apple only) devices, I’ve added one of each. Finally just as a note, the Apple detection is just user agent sniffing so can’t be depended on. Note: for the isRetina function I’m using a dppx of 2 instead of 1.3 because all retina apple devices have a 2dppx.

Note it appears that MS Edge has some issues with non integer values

function isHighDensity(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}


function isRetina(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
}

More Related Contents:

  1. When should I use jQuery’s document.ready function?
  2. Replacing css file on the fly (and apply the new style to the page)
  3. How do I chain three asynchronous calls using jQuery promises?
  4. jQuery checkbox checked state changed event
  5. How to find if an array contains a specific string in JavaScript/jQuery?
  6. How to include multiple js files using jQuery $.getScript() method
  7. Prevent Page Load on Jquery Form Submit with None Display Button
  8. Verify External Script Is Loaded
  9. How can I use JavaScript or jQuery to read a pixel of an image when user clicks it?
  10. How to add/subtract dates with JavaScript?
  11. Benefits of loading JS at the bottom as opposed to the top of the document
  12. Parsing URL hash/fragment identifier with JavaScript
  13. jquery submit form and then show results in an existing div
  14. keyCode values for numeric keypad?
  15. JS – get image width and height from the base64 code
  16. jqGrid access cell data while it is being edited
  17. jQuery – How to select by attribute
  18. time delayed redirect?
  19. jQuery on ‘double click’ event (dblclick for mobile)
  20. Best way to convert string to array of object in javascript?
  21. Adding an onclick function to go to url in JavaScript?
  22. jQuery call function from a string [duplicate]
  23. Waiting for dynamically loaded script
  24. How to disable mouseout events triggered by child elements?
  25. Jquery Ajax beforeSend and success,error & complete
  26. jQuery .on() method doesn’t see new elements
  27. Passing parameters to a JQuery function
  28. jQuery: Check if special characters exists in string
  29. Form Validation With Bootstrap (jQuery)
  30. Validate Dynamically Added Input fields

Leave a Comment