什么是最好的方式来检测使用JavaScript的设备上的视网膜支持？
现在我正在使用这个：
function is_retina_device() { return window.devicePixelRatio > 1; } 但这简单让我害怕。 是否有更彻底的检查？
根据我最近阅读的所有内容，浏览器似乎正朝着resolution媒体查询expression方式发展。 这不是在当前接受的答案中使用的device-pixel-ratio 。 device-pixel-ratio只能用作回退的原因是因为它不是标准的媒体查询。
根据w3.org：
曾几何时，Webkit决定需要屏幕分辨率的媒体查询。 而不是使用已经标准化的分辨率媒体查询，他们发明了-webkit-device-pixel-ratio。
查看全文
解决媒体查询文档
由于resolution是标准化的，因此未来我们首先将其用于未来打样的检测。 此外，因为我不确定是否只想检测高dppx设备或仅检测视网膜 （仅限Apple）设备，所以我添加了其中的一个。 最后，作为一个说明，苹果检测只是用户代理嗅探，所以不能依赖 。 注意：对于isRetina函数，我使用的是2而不是1.3的dppx，因为所有视网膜苹果设备都有一个2dppx。
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); }
如果你想要它的图像，你可以使用retinajs或这个代码是一个普遍的反应来检测它：
function isRetinaDisplay() { if (window.matchMedia) { var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)"); return (mq && mq.matches || (window.devicePixelRatio > 1)); } }
实际上，如果你只关心现代浏览器，你在问题中使用的代码是完全正确的。 （请参阅： http : //caniuse.com/#feat=devicepixelratio ）
所有的现代浏览器都已经实现了，而旧版本的浏览器只能用于较低分辨率的图像。 我不希望IE10-出现在视网膜/高分辨率设备上。 另外，在JavaScript中使用CSS检查不比使用本地窗口属性更奇怪？
呃，devicePixelRatio浏览器支持甚至比分辨率规格更好。 （请参阅： http : //caniuse.com/#feat=css-media-resolution ）
我想说这其实是非常安全的使用，我们在每月访问量超过1000万的生产网站中使用它。 按预期工作。
我唯一改变的是函数名称，因为加载高分辨率图像的需要在技术上并不意味着屏幕是视网膜。 其实，你甚至不需要数字检查，因为undefined > 1结果是false 。
function is_high_resolution_screen() { return window.devicePixelRatio > 1; }
devicePixelRatio根本不可靠。 当你放大到200％时，window.devicePixelRatio会返回2，但你不在视网膜显示器上。
