2

AppleのWebサイトでは、Retinaディスプレイをサポートしているようです。@ 2x画像を使用したiOSの場合と同じように機能しますか？

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/

あなたのウェブサイトをRetinafy

于 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 に答える