jQuery 使用 JavaScript 在设备上检测视网膜支持的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19689715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to detect retina support on a device using JavaScript?
提问by TK123
Right now I am using this function:
现在我正在使用这个功能：
function is_retina_device() {
return window.devicePixelRatio > 1;
}
But its simplicity scares me. Is there a more thorough check?
但它的简单让我害怕。有没有更彻底的检查？
采纳答案by Adam Merrifield
According to everything that I've read recently, browsers seem to be moving towards the resolutionmedia query expression. This is instead of device-pixel-ratiothat is being used in the currently accepted answer. The reason why device-pixel-ratioshould only be used as a fallback is because it is not a standard media query.
根据我最近阅读的所有内容，浏览器似乎正在转向resolution媒体查询表达式。这不是device-pixel-ratio当前接受的答案中使用的那个。之所以device-pixel-ratio只应用作后备，是因为它不是标准的媒体查询。
According to w3.org:
根据 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.
曾几何时，Webkit 决定需要对屏幕分辨率进行媒体查询。但是他们没有使用已经标准化的分辨率媒体查询，而是发明了 -webkit-device-pixel-ratio。
Resolution Media Query Documentation
Since resolutionis 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 onlyretina(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 dependedon. Note: for the isRetinafunction I'm using a dppx of 2 instead of 1.3 because all retina apple devices have a 2dppx.
由于resolution是标准化的，因此未来让我们首先在检测中使用它以进行未来证明。另外，因为我不确定您是只想检测高 dppx 设备还是只检测视网膜（仅限 Apple）设备，所以我分别添加了一个。最后，请注意，Apple 检测只是用户代理嗅探，因此不能依赖。注意：对于isRetina函数，我使用 dppx 为 2 而不是 1.3，因为所有视网膜苹果设备都有 2dppx。
Noteit appears that MS Edge has some issues with non integer values
请注意，似乎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);
}
回答by Juan
If you want it for images you can use retinajsor this code is a common response to detect it:
如果您想要它用于图像，您可以使用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));
}
}
回答by Guido Bouman
Actually, the code you're using in your question is just completely right if you care only about modern browsers. (See: http://caniuse.com/#feat=devicepixelratio)
实际上，如果您只关心现代浏览器，那么您在问题中使用的代码是完全正确的。（参见：http: //caniuse.com/#feat=devicepixelratio）
All modern browsers have it implemented, and older browsers would be just served your lower resolution images. I don't expect IE10- to show up on a retina / high-res device. Also, is using CSS checks in JavaScript not more weird than using a native window property?
所有现代浏览器都实现了它，旧浏览器只会为您提供较低分辨率的图像。我不希望 IE10- 出现在视网膜/高分辨率设备上。另外，在 JavaScript 中使用 CSS 检查是否比使用本机窗口属性更奇怪？
Heck, devicePixelRatio browser support is even better than the resolution spec. (See: http://caniuse.com/#feat=css-media-resolution)
哎呀，devicePixelRatio 浏览器支持甚至比分辨率规范还要好。（见：http: //caniuse.com/#feat=css-media-resolution）
I'd say it's actually very safe to use, we use it in production websites with over 10 million visitors a month. Works as expected.
我想说它实际上使用起来非常安全，我们在每月访问量超过 1000 万的生产网站中使用它。按预期工作。
The only thing I'd change is the function name, as the need to load high res images doesn't technically mean the screen is retina. Actually, you don't even need a number check, as undefined > 1results in false.
我唯一要改变的是函数名称，因为加载高分辨率图像的需要在技术上并不意味着屏幕是视网膜。实际上，您甚至不需要数字检查，因为undefined > 1结果是false.
function is_high_resolution_screen() {
return window.devicePixelRatio > 1;
}
回答by Lee Le
devicePixelRatio is not reliable at all. when you zoom in to 200%, the window.devicePixelRatio will return you 2, but you are not on a retina display.
devicePixelRatio 根本不可靠。当您放大到 200% 时，window.devicePixelRatio 将返回 2，但您不在视网膜显示器上。
