2

在 Apple 的网站上，他们似乎支持视网膜显示器。它的工作方式与在 iOS 上使用 @2x 图像的方式相同吗？

4

3 回答 3

13
  • 将图像存储在 /img/logo.png（普通版）和 /img/logo@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)$ $1@2x$2 [NC,L]
于 2013-05-31T01:29:05.147 回答
7

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

重新调整您的网站

于 2012-07-13T19:48:35.950 回答
5

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/

于 2013-08-29T02:48:57.817 回答