我可以通过使用媒体查询设置Content CSS属性来测试Retina设备吗？

Question

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';

Answer 1

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;