将高分辨率图像提供给视网膜显示 [英] Serving high res images to retina display

问题描述

如何以跨浏览器兼容方式（以浏览器兼容的方式）检测访问网页的设备的像素密度，以便可以投放标准或高分辨率图像，而不会将图像倍​​增到任何设备？ / p>

是否有自动化此JavaScript的JavaScript库？

解决方案

for 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- -pixel-ratio 或 -webkit-device-pixel-ratio

• 使用简单。


• 适用于所有浏览器。


• 缺点：适合背景。难于< img> 标记

Javascript解决方案$ c> 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） / *所有其他人* / {
 .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 / buttons /＃CustomIcons

Javascript解决方案

window.devicePixelRatio 属性来检测解析。

  if（window.devicePixelRatio > = 2）{
 alert（This is a Retina screen）; 
 //做某事操作图像url属性
 //例如在所有图像urls之前添加`@ 2x -| 
} 
  

浏览器支持

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设备使用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
我不是一个特别的视网膜图像的忠实粉丝，因为它使网络太重 - 特别是通过移动连接，尽管如此，人们会做到。 - Peter-Paul Koch

更新2013-04-18 更新jQuery移动链接

how to detect, in a cross-browser compatible way, the pixel density of the device visiting a webpage so that one can either serve standard or highres images without forcing doubled images to any device?

Is there any javascript library that automates this?

解决方案

Why setting for Retina

iPhone 4s, iPhone 5, iPad3, iPad4, Macbook 15", Macbook 13" all use Retina display.

Android also support high resolution display, as well as Windows 8(Lumia 920) as mentioned by @JamWaffles.

Adding high resolution support is good for user experience but it definitely add load for developer, as well as bandwidth for mobile. Somebody don't suggest doing that.(Peter-Paul Koch, see the bottom "further reading")

Breifing

There are two methods to implement this function. One is Javascript and the other is CSS. All current solutions are for Retina, but could extend to Android high resolution easily.

CSS solution is about Media Query and -webkit-min-device-pixel-ratio or -webkit-device-pixel-ratio

• Simple to use.
• Apply to all browsers.
• Disadvantage: Good for background. Harder for <img> tag

Javascript solution is about window.devicePixelRatio property.

• Advantage: Javascript could manipulate image source. So, if you are going to serve direct image instead of background, better to use Javascript
• Could not apply to all browsers but current support is good enough. See below for list.
• Need a bit more setting.

CSS Solution

For normal images, say an icon

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

For Retina, add those below

@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;
}

You can use min-resolution: 2dppx to replace min-resolution: 192dpi, for those who don't want to remember numbers

Note the difference:

1. Two different icons, one normal, one high res. High res icon is double size than normal one.
2. The background size. The later is half. But you need test it in your real use.

Resource: + http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/ + http://view.jquerymobile.com/master/demos/widgets/buttons/#CustomIcons

Javascript Solution

Use window.devicePixelRatio property to detect resolution.

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
}

Browser Support

Safari, Android WebKit, Chrome 22+ and on Android, Opera Mobile, BlackBerry WebKit, QQ, Palm WebKit, Ref: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

For Android

Android device use 1.5 as high resolution instead of 2 in Retina. http://developer.android.com/guide/webapps/targeting.html --#Targeting Device Density with CSS, #Targeting Device Density with JavaScript

Further Good Reading

http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html "I’m not a big fan of serving special retina images because it makes the web too heavy — especially over a mobile connection. Nonetheless people will do it." -- Peter-Paul Koch

Update 2013-04-18 Update jQuery mobile link

这篇关于将高分辨率图像提供给视网膜显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！