Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」
2012年04月12日-
スポンサード リンク
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なんかにキャッシュさせつつ意図的にクリアさせる仕組みも入れたほうがよさそうですが、小さなサイトでは便利に使えそうです
関連エントリ
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なんかにキャッシュさせつつ意図的にクリアさせる仕組みも入れたほうがよさそうですが、小さなサイトでは便利に使えそうです
関連エントリ
スポンサード リンク
By.KJ : 2012年04月12日 09:03 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)Advertisements
オススメサイト
SITE PROFILE
最新のブログ記事(新着順)
- シンプルデザインが使いやすそうなWYSIWYGエディタ「RichText」
- 階層的な右クリックメニュー実装「jQuery Menu」
- selectより機能が便利で見やすいListbox実装
- HTML5のデスクトップ通知を各種ブラウザで簡単実行できる「HTML5-Desktop-Notifications」
- ピュアCSSで新しいローディングアニメーション
- 軽量のコンテンツスライダー実装「thumbelina」
- borderの色をアニメーションさせられる「BorderColorAnimate」
- 記事中の画像などをページトップに留めて面白い効果を作る「jquery-stopattop」
- コスメ素材のPSDファイルセット
- PSDファイルをSketchの形式に変換できる「PSD to Sketch Design Converter」
- 過去のエントリ
