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
最新のブログ記事(新着順)
- カスタマイズ性の高いツールチップ実装「jTippy」
- 手書き感がすごいグラフ描画JS「roughViz」
- Three.jsを使って３Dモデルに着色したりカスタマイズするUI実装
- 右クリックで円形メニュー実装「radialMenu」
- React用アニメーションライブラリ「Framer Motion」
- フィールド同士を接続するUI実装「FieldsLinker」
- selectボックスのbootstrap化「bootstrapSelect」
- マウス位置に反応して画像がバラバラひろがる「Image Trail Effects」
- テーブルを検索・ソート・ページ分けができる「jquery.fancyTable」
- タイプライターアニメーション「type-this」
- 過去のエントリ
