Apple视网膜支持HTML中的图像

Question

在Apple的网站上,看起来他们支持视网膜显示器.它是否与使用@ 2x图像的iOS相同？

Answer 1

• 将图像存储在/img/logo.png(常规版)和/img/logo@2x.png(视网膜版)中

JS for Head-Tag

var retina = 0;
try {
    retina = Number(window.devicePixelRatio);
} catch(e) {}
retina = (retina > 1) ? 1 : 0;

var dt = new Date();
dt.setTime(dt.getTime()+(30*24*60*60*1000));
document.cookie = [
    '_r=' + retina,
    'expires=' + dt.toGMTString(),
    'path=/img/'
].join(';');

mod_rewrite用于图像

RewriteCond %{HTTP_COOKIE} _r=1
RewriteCond %{REQUEST_URI} img/
RewriteRule ^(.*)(.gif|.jpg|.png)$ $1@2x$2 [NC,L]

Answer 2

关于如何完成这项工作有很多很好的演练,包括:http://mir.aculo.us/2012/06/26/flowchart-how-to-retinafy-your-website/

Answer 3

Webkit开发人员已将srcset属性添加到<img />标记中,该标记当前位于Webkit Nightly中(截至2013年8月28日,未在任何已发布的Safari版本中).这是一个W3C标准,所以希望其他浏览器也很快支持它.它具有优雅降级的好处,因为不支持标记的旧浏览器将只使用普通图像.

例:

<img src="normal-image.jpg" srcset="better-image.jpg 2x">

这是一篇关于该功能的博客文章:https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/