54

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

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

但它的简单让我害怕。有没有更彻底的检查？

4

4 回答 4

45

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

根据 w3.org：

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

查看全文

解析媒体查询文档

由于resolution是标准化的，因此未来让我们首先在检测中使用它以进行未来的校对。另外，因为我不确定您是只想检测高 dppx 设备还是只检测 视网膜（仅限 Apple）设备，所以我已经添加了每一个设备。最后作为说明，Apple 检测只是用户代理嗅探，因此不能依赖。注意：对于该isRetina功能，我使用 2 而不是 1.3 的 dppx，因为所有视网膜苹果设备都有 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);
}
于 2013-12-06T00:35:02.310 回答
32

如果您想要它用于图像，您可以使用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)); 
        }
    }
于 2013-10-30T18:00:13.083 回答
18

实际上，如果您只关心现代浏览器，那么您在问题中使用的代码是完全正确的。（见：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;
}
于 2016-01-12T09:28:47.313 回答
4

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

于 2016-09-28T06:42:49.953 回答