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

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

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

CSS：

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

用jQuery测试：

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

最佳答案

使用window.devicePixelRatio。如果大于1，则显示retina。

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

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

关于javascript - 我可以通过使用媒体查询设置Content CSS属性来测试Retina设备吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24944121/