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

Question

如何以跨浏览器兼容的方式检测访问网页的设备的像素密度,以便可以在不向任何设备强制加倍图像的情况下提供标准或高图像？

有没有自动化的JavaScript库？

Answer 1

为何选择Retina

iPhone 4s,iPhone 5,iPad3,iPad4,Macbook 15",Macbook 13"都使用Retina显示屏.

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

添加高分辨率支持有利于用户体验,但它肯定会增加开发人员的负担以及移动带宽.有人不建议这样做.(Peter-Paul Koch,见底部"进一步阅读")

Breifing

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

CSS解决方案是关于Media Query和-webkit-min-device-pixel-ratioor-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

注意区别:

1. 两个不同的图标,一个正常,一个高分辨率.高分辨率图标比普通图标大两倍.
2. 背景大小.后者是一半.但是你需要在实际使用中测试它.

资源:+ http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/ + http://view.jquerymobile.com/master/demos/widgets/按钮/#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

Android设备在Retina中使用1.5作为高分辨率而不是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移动链接