Apple视网膜支持HTML中的图像

在Apple的网站上，它看起来像支持视网膜显示。它的工作方式与使用@ 2x图像的iOS相同吗？Apple视网膜支持HTML中的图像

来源

2012-07-13 Gustaf Rosenblad

有关于如何做到这一点了一些很好的演练，包括：http://mir.aculo.us/2012/06/26/flowchart-how-to-retinafy-your-website/

Retinafy Your Website

来源

2012-07-13 19:48:35 coreyward

很有趣，但我强烈建议http://caniuse.com/#feat=srcset作为当前最佳答案对这个问题。 – 2017-03-15 23:59:32

Store中的/img/logo.png图像（普通版）和/ IMG /标志@ 2x.png（视网膜版）

JS的头标签

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)$ [email protected]$2 [NC,L]

来源

2013-05-31 01:29:05

我不认为人们意识到这个特定答案是多么辉煌。 – marksyzm 2013-06-18 22:03:19

这真是一个了不起的方法，对源代码的修改最少！ – linjunhalida 2013-07-09 02:46:46

Webkit的开发者已经添加了srcset属性到< IMG/>标签，这是目前在WebKit每日（未在任何发布了Safari版本作为2013年8月28日的）。这是一个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/

来源

2013-08-29 02:48:57

感谢这个珍闻。在这之间的一个emkaka的答案我已经得到了所有我需要在这个裂缝。 – the0ther 2013-10-07 16:08:37

虽然我发现在iOS6中还没有支持'srcset'，并且我听到的是iOS7。 – the0ther 2013-10-08 19:48:13

仍然无法在Safari中使用。据称Chrome自v34开始支持这个功能。 – 2014-04-30 21:42:31

Apple视网膜支持HTML中的图像

回答

相关问题