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

Question

现在我正在使用这个:

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

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

Answer 1

根据我最近阅读的所有内容,浏览器似乎正朝着resolution媒体查询表达方向发展.而不是device-pixel-ratio在当前接受的答案中使用它.之所以device-pixel-ratio应该仅用作后备是因为它不是标准的媒体查询.

根据w3.org:

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

查看完整文章

分辨率媒体查询文档

由于resolution是标准化的,因此未来让我们首先在检测中使用它来进行未来验证.另外,因为我不确定你是想要只检测高dppx设备还是仅 检测视网膜(仅限Apple)设备,我已经添加了其中一个.最后,作为一个注释,Apple检测只是用户代理嗅探,所以不能依赖.注意:对于isRetina函数我使用的是dppx为2而不是1.3,因为所有视网膜苹果设备都有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);
}

Answer 2

如果你想要它用于图像你可以使用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)); 
        }
    }

Answer 3

实际上,如果您只关心现代浏览器,那么您在问题中使用的代码就完全正确.(见: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;
}

Answer 4

devicePixelRatio 根本不可靠。当您放大到 200% 时，window.devicePixelRatio 将返回 2，但您不在视网膜显示屏上。