javascript - 为视网膜显示器提供高分辨率图像

如何以跨浏览器兼容的方式检测，访问网页的设备的像素密度，以便可以提供标准或高分辨率图像，而无需将双倍图像强制给任何设备？

是否有任何 javascript 库可以自动执行此操作？

最佳答案

为什么设置为 Retina

iPhone 4s、iPhone 5、iPad3、iPad4、Macbook 15"、Macbook 13"均使用 Retina 显示屏。

Android 还支持高分辨率显示，以及@JamWaffles 提到的 Windows 8(Lumia 920)。

添加高分辨率支持对用户体验有好处，但它肯定会增加开发人员的负担，以及移动的带宽。有人不建议这样做。(彼得-保罗科赫，见底部“进一步阅读”)

布雷芬

有两种方法可以实现这个功能。一个是Javascript，另一个是CSS。当前所有的解决方案都适用于 Retina，但可以轻松扩展到 Android 高分辨率。

CSS 解决方案是关于媒体查询和 -webkit-min-device-pixel-ratio 或 -webkit-device-pixel-ratio

使用简单。

适用于所有浏览器。

缺点:适合背景。对于 <img> 标签

更难

Javascript 解决方案是关于 window.devicePixelRatio 属性。

优点:Javascript 可以操作图像源。因此，如果您要提供直接图像而不是背景，最好使用 Javascript

无法适用于所有浏览器，但目前的支持已经足够了。列表见下文。

需要多一点设置。

CSS 解决方案

对于普通图像，请说一个图标

.sample-icon {
    background-image: url("../images/sample-icon.png");
    background-size: 36px 36px;
}

对于 Retina，添加以下内容

@media only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
    (min-resolution: 192dpi) /* Everyone else */ {
    .sample-icon {
        background-image: url("../images/sample-icon-highres.png");
        background-size: 18px 18px;
}

对于那些不想记住数字的人，您可以使用 min-resolution: 2dppx 替换 min-resolution: 192dpi
注意区别:

两种不同的图标，一种是正常的，一种是高分辨率的。高分辨率图标是普通图标的两倍。

背景尺寸。后者是一半。但是您需要在实际使用中对其进行测试。

资源:
+ http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
+ http://view.jquerymobile.com/master/demos/widgets/buttons/#CustomIcons

Javascript 解决方案

使用 window.devicePixelRatio 属性来检测分辨率。

if (window.devicePixelRatio >= 2) {
  alert("This is a Retina screen");
  //Do something to manipulate image url attribute
  //for example add `@2x-` before all image urls
}

浏览器支持

Safari、Android WebKit、Chrome 22+ 和 Android、Opera Mobile、BlackBerry WebKit、QQ、Palm WebKit、
引用:http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

安卓版

Android 设备使用 1.5 作为高分辨率而不是 Retina 中的 2。
http://developer.android.com/guide/webapps/targeting.html --#Targeting Device Density with CSS，#Targeting Device Density with JavaScript

进一步阅读

http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
“我不喜欢提供特殊的视网膜图像，因为它使网络变得过于沉重——尤其是通过移动连接。尽管如此，人们还是会这样做。” ——彼得-保罗·科赫

更新 2013-04-18 更新 jQuery 移动链接

关于javascript - 为视网膜显示器提供高分辨率图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13430828/