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

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

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

我发现：

var retina = window.devicePixelRatio > 1;

这将使视网膜恢复为真，您可以使用if函数来提供正确的图像

资料来源：

-InfiniDaZa

为什么要设置视网膜 iPhone4S、iPhone5、iPad3、iPad4、MacBook15、MacBook13都使用视网膜显示器

Android还支持高分辨率显示，以及@JamWaffles提到的Windows8（Lumia920）

添加高分辨率支持有利于用户体验，但它肯定会增加开发人员的负载，以及移动设备的带宽。有人不建议这样做。（彼得·保罗·科赫，见底部“进一步阅读”）

酿造 有两种方法可以实现此功能。一个是Javascript，另一个是CSS。目前所有的解决方案都是针对视网膜的，但很容易扩展到Android的高分辨率

CSS解决方案是关于媒体查询和

-webkit最小设备像素比率

或

-webkit设备像素比率

• 简单易用
• 适用于所有浏览器
• 缺点：适合背景。
  标记的难度更大

Javascript解决方案是关于

window.devicePixelRatio

属性的

• 优点：Javascript可以操纵图像源。所以，如果您打算提供直接图像而不是背景，最好使用Javascript
• 无法应用于所有浏览器，但当前的支持已经足够好了。请参阅下面的列表
• 需要更多的设置

CSS解决方案 对于普通图像，请使用图标

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

对于视网膜，添加以下内容

@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

，以供不想记住数字的用户使用

请注意区别：

两个不同的图标，一个普通，一个高分辨率。高分辨率图标的大小是普通图标的两倍

背景大小。后者是一半。但你需要在实际使用中测试它

资源： + +

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、黑莓WebKit、QQ、Palm WebKit、， 参考：

对于Android Android设备使用1.5作为高分辨率，而不是视网膜中的2。 --#使用CSS确定设备密度，使用JavaScript确定设备密度

进一步阅读 “我不太喜欢提供特殊的视网膜图像，因为这会让网络负担过重——尤其是在移动连接上。尽管如此，人们还是会这么做。”——彼得·保罗·科赫

---

更新2013-04-18更新jQuery mobile link您需要了解网络功能、响应图像和资源加载

到目前为止，javascript解决方案并不安静，因为它们通常需要在图像交换之前下载两种资源（图像）

最好的选择是后台css媒体查询，除非您使用以下完整解决方案：

---

此处解释：

谢谢，我倾向于接受答案，但苹果真的是唯一生产高分辨率显示器的制造商吗？webkit最小设备像素比率是否将浏览器的使用限制为Safari和Chrome？例如，如果我在Macbook视网膜上使用Firefox会怎么样？@pistacchio，对于你的第一个问题，除了苹果之外，Android也支持高分辨率，但支持1.5。其次，css解决方案可以应用于所有浏览器，我为webkit之外的浏览器添加了一行代码。详细答案请查看更新版本。@pistacchio Windows Phone 8支持高分辨率；Lumia 920等都有720p显示器，其像素密度实际上高于视网膜显示器。对于视网膜，你说的是18px的背景大小，但我认为你的意思是32px（和以前一样，只是强制），只是图像实际上是64px，对吗？@Kevin，不，我仍然是指18px。想象一下iPhone3和iPhone5，它们的屏幕大小相似。然后在您的站点中，某个图标需要保持相同的大小—这两个设备的大小为18px。不过，iPhone5支持视网膜，因此您可以使用高分辨率图标36x36。您只需强制此36x图标以实际大小18px显示即可。虽然全部都是18x，但在iPhone5中它看起来会很漂亮，因为它现在的分辨率很高。