Apple retina support for images in HTML

问题:

On Apple's website it looks like they have support for retina displays. Does it work the same way that it does on iOS with a @2x image?

回答1:

There are a number of good walkthroughs on how this is done, including: http://mir.aculo.us/2012/06/26/flowchart-how-to-retinafy-your-website/

回答2:

• Store your images in /img/logo.png (regular version) and /img/[e-mail] (retina version)

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]

回答3:

Webkit devs have added the srcset attribute to the <img/> tag, which is currently in Webkit Nightly (not in any released Safari version as of Aug 28, 2013). This is a W3C standard, so hopefully other browsers will support it soon too. It has the benefit of graceful degradation since older browsers that don't support the tag will just use the normal image.

Example:

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

Here is a blog post concerning the feature: https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/