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なんかにキャッシュさせつつ意図的にクリアさせる仕組みも入れたほうがよさそうですが、小さなサイトでは便利に使えそうです
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- 過去のエントリ