Question

如何以跨浏览器兼容的方式检测 ，访问网页的设备的像素密度，以便可以提供标准图像或高图像，而无需将双重图像强制到任何设备？< / p>

有没有自动化的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解决方案是关于媒体查询和-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

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移动链接

Answer 2

我发现了这个：

var retina = window.devicePixelRatio > 1;

这应该使视网膜返回true，你可以使用if函数来提供正确的图像。

来源：http://briancray.com/posts/detect-retina-displays-with-javascript

-InfiniDaZa

Answer 3

您需要了解网络功能，响应式图像和资源加载。

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

你最好的选择是后台css媒体查询，除非你选择这样的完整解决方案： http://adaptive-images.com 在此解释：https://vimeo.com/38947881

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

3 个答案: