javascript - 我可以通过使用媒体查询设置内容 css 属性来测试视网膜设备吗？

Question

是否有人认为在视网膜设备content上设置 css 属性以body运行特定于视网膜的 js 有什么问题？

在我看来，这似乎是用于测试视网膜设备的最简单、最轻便的跨浏览器解决方案。至少它对我有用......

CSS：

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

用 jQuery 测试：

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

Answer 1

使用window.devicePixelRatio. 如果它超过 1 - 它的retina显示。

对于 IE 10+（可在平板电脑和智能手机上使用的 IE），您可以在screen.deviceXDPI和上进行中继screen.logicalXDPI：

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