向Retina显示屏提供高分辨率图像

Question

向Retina显示屏提供高分辨率图像

javascriptcssretina-display

12

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

是否有任何自动化此过程的JavaScript库？

- pistacchio

3个回答

1

我找到了这个：

var retina = window.devicePixelRatio > 1;

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

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

-InfiniDaZa

- InfiniDaZa

0

你需要了解网络能力、响应式图片和资源加载。

到目前为止，JavaScript 的解决方案还不够完美，因为它们通常需要在图像交换之前下载两个资源（图像）。

除非你选择使用全面的解决方案，比如这个：http://adaptive-images.com，否则最好使用背景 CSS 媒体查询。

这里有详细的说明：https://vimeo.com/38947881

- Murray

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Billy Chan · Accepted Answer

为什么需要设置Retina

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

Android也支持高分辨率显示，Windows 8（Lumia 920）也支持，就像@JamWaffles提到的那样。

增加高分辨率支持有利于用户体验，但对开发者的负担和移动带宽会产生影响。有些人不建议这样做。（Peter-Paul Koch，请参见底部的“进一步阅读”）

简要说明

有两种方法可以实现此功能。一种是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上的Chrome、Opera Mobile、BlackBerry WebKit、QQ、Palm WebKit，参考资料：http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

对于Android

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

向Retina显示屏提供高分辨率图像

为什么需要设置Retina

简要说明

CSS解决方案

Javascript解决方案

对于Android

更多好文阅读