javascript - 使用 JavaScript 在设备上检测视网膜支持的最佳方法是什么？

Question

现在我正在使用这个功能:

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

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

Answer 1

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

根据 w3.org:

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.

View Full Article

Resolution Media Query Documentation

由于 resolution 是标准化的，因此 future 让我们首先在检测中使用它以进行 future 验证。另外，因为我不确定您是只想检测高 dppx 设备还是仅 retina(仅限 Apple)设备，所以我分别添加了一个。最后请注意，Apple 检测只是用户代理嗅探，因此不能依赖。注意:对于 isRetina 函数，我使用的 dppx 为 2 而不是 1.3，因为所有视网膜苹果设备都有 2dppx。

注意 看来 MS Edge has some issues with non integer values

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