前の記事 ≪:2012年4月11日 管理人のブックマーク
次の記事 ≫:カッコいいティーザーページ作成用CSS3テンプレート

Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」

2012年04月12日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Retina.js | Retina graphics for your website

Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」
<img src="/images/my_image.png" /> という画像タグがあったとするとスクリプトがサーバ上の"/images/my_image@2x.png"というファイルを自動でチェックして存在すれば置き換えてくれます。
インストールはretina.jsを読み込むだけというお手軽さがいいです。
単に高解像度で出したい部分だけファイルを用意して置いてあげればよいというのはお手軽ですね。



<script type="text/javascript" src="/scripts/retina.js"></script> を</body>の前、ページの最後あたりで記述します。
いちいちサーバ側にチェックしにいってしまうということもあり、大きなサイトではlocalStorageなんかにキャッシュさせつつ意図的にクリアさせる仕組みも入れたほうがよさそうですが、小さなサイトでは便利に使えそうです

関連エントリ
関連の記事検索:JavaScript, jQuery, iPad, iPhone, スマートフォン, Retinaディスプレイ
スポンサード リンク

By.KJ : 2012年04月12日 09:03 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)