CODEWITHSUNDEEP
javascriptjquerycssretina
kevnk
kevnk

Reputation: 19099

Can I test retina devices by setting content css property with media queries?

Does anyone see anything wrong with setting the content css property on body when on retina device for the purpose of running retina-specific js?

This seems to me like the simplest, lightest, cross-browser solution for testing for retina devices. At least it's worked for me...

CSS:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    body {
      content: 'retina'
    }
}

Test with jQuery:

var isRetina = $('body').css('content') == 'retina';

Upvotes: 1

Views: 178

Answers (1)

Alex
Alex

Reputation: 11245

Use window.devicePixelRatio. If it more than 1 - it's retina display.

For IE 10+ (which IE are available on tablets and smartphones) you can relay on screen.deviceXDPI and screen.logicalXDPI:

window.devicePixelRatio = window.devicePixelRatio ||
                        window.webkitDevicePixelRatio ||
                        screen.deviceXDPI/screen.logicalXDPI  ||
                        1;

Upvotes: 4

Related Questions