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

现在我正在使用这个：

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

但它的简单性让我感到害怕.有更彻底的检查吗？

解决方法:

根据我最近阅读的所有内容,浏览器似乎正朝着分辨率媒体查询表达方向发展.这不是在当前接受的答案中使用的设备像素比.设备像素比率仅应用作回退的原因是因为它不是标准媒体查询.

根据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

由于分辨率是标准化的,因此未来让我们首先在检测中使用它来进行未来验证.另外,因为我不确定你是想要只检测高dppx设备还是仅检测视网膜(仅限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);
}

标签：javascript,jquery,retina-display
来源： https://codeday.me/bug/20190918/1811699.html