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 for images

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属性添加到＆lt; img /＆gt; tag，目前在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/