使用JavaScript检测设备上视网膜支持的最佳方法是什么？ [英] What is the best way to detect retina support on a device using JavaScript?

问题描述

现在我正在使用它：

function is_retina_device() {
    return window.devicePixelRatio > 1;
}

但它的简单性让我感到害怕。是否有更彻底的检查？

But it's simplicity scares me. Is there is a more thorough check?

推荐答案

根据我最近阅读的所有内容，浏览器似乎正朝着 resolution 媒体查询表达式。这是在当前接受的答案中使用的 device-pixel-ratio 。 device-pixel-ratio 之所以只能用作后备，是因为它不是标准的媒体查询。

According to everything that I've read recently, browsers seem to be moving towards the resolution media query expression. This is instead of device-pixel-ratio that is being used in the currently accepted answer. The reason why device-pixel-ratio should only be used as a fallback is because it is not a standard media query.

根据w3.org：

曾几何时，Webkit决定需要对屏幕分辨率进行媒体查询。但他们发明了-webkit-device-pixel-ratio，而不是使用已经标准化的分辨率媒体查询。

Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio.

查看完整文章

分辨率媒体查询文档

由于分辨率是标准化的，因此未来让我们首先在检测中使用它来进行未来验证。另外，因为我不确定您是否只想检测高dppx设备或仅 视网膜（仅限Apple）设备，我已经添加了其中一个。最后，作为一个注释，Apple检测只是用户代理嗅探，因此无法依赖。注意：对于 isRetina 函数，我使用的是dppx为2而不是1.3，因为所有视网膜苹果设备都有2dppx。

Since resolution is standardized and therefore the future let's use that first in the detection for future proofing. Also because I'm not sure if you want to detect only high dppx devices or only retina(Apple only) devices, I've added one of each. Finally just as a note, the Apple detection is just user agent sniffing so can't be depended on. Note: for the isRetina function I'm using a dppx of 2 instead of 1.3 because all retina apple devices have a 2dppx.

注意似乎 MS Edge在非整数值方面存在一些问题

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);
}

这篇关于使用JavaScript检测设备上视网膜支持的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！