如何以跨浏览器兼容的方式检测访问网页的设备的像素密度，以便在不向任何设备强制加倍图像的情况下提供标准或高级图像？
有没有任何javascript库可以自动实现这一点？
为什么设置Retina
iPhone 4s、iPhone 5、iPad3、iPad4、Macbook 15"、Macbook 13"均使用Retina显示屏。
安卓系统还支持高分辨率显示器，以及@JamWaffles提到的Windows 8(Lumia 920)。
添加高分辨率支持有利于用户体验，但它肯定会增加开发人员的负载，以及移动设备的带宽。有人不建议那样做。(彼得·保罗·科赫，见底部"进一步阅读")
Breifing
有两种方法可以实现此功能。一个是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--#使用CSS确定设备密度，#使用JavaScript 确定设备密度
进一步阅读
http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html"我不太喜欢提供特殊的视网膜图像，因为它会让网络变得太重，尤其是在移动连接上。尽管如此，人们还是会这么做的。"——彼得·保罗·科赫
更新2013-04-18更新jQuery移动链接
我发现了这个：
var retina = window.devicePixelRatio > 1;
这将使retina返回true，您可以使用if函数来提供正确的图像。
来源：http://briancray.com/posts/detect-retina-displays-with-javascript
-InfiniDaZa
您需要了解网络功能、响应图像和资源加载。
到目前为止，javascript解决方案并不安静，因为它们通常需要在图像交换之前下载两个资源(图像)。
你最好的选择是后台css媒体查询，除非你使用这样的完整解决方案：http://adaptive-images.com此处解释：https://vimeo.com/38947881