jQueryで画像をRetina対応させるプラグインを作ってみた | soplog(そぷログ)
レチナ対応機種が無かったのでこれまで避けてきたのですが、今更ながら我が家にiPhone4sがきたので、前々から構想していたレチナ対応をプラグインにしてみました。 追記： iOS6で全般うまく動いて無いみたいなので調査中です(´・ω・`) 追記：同日15時53分 諸々修正いたしました。TLの皆様、ご助力ありがとうございました!! 追記：2012年9月27日10時頃 ご要望をいただいたので、本エントリーの追記、サンプルの改修をしました。 サンプル サンプル－ダウンロード 使い方 HTML＋JavaScript <!-- 画像の幅：data-img-width 画像の高さ：data-img-height 画像のALT：data-img-alt 画像のパス：data-img-path ←追加 --> <a href="img.jpg" class="img-retina" data-img-wid
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える - かちびと.net
iPhone4のRetinaディスプレイで閲覧 された際に自動で高解像度の画像に 自動で切り替えるjQueryのコード。 @2xが付くアレです。ちょっと今更 な話題なので誰も見て無さそうな 日曜日に書いて置こうと思います。 jQuery Retinaっていうプラグインがありますが、このライブラリのように色々宜しくやってくれるようなものじゃなく、ただのスニペットです。実際にはもうちょい工夫しないとならないと思いますので参考程度で。というか僕がRetinaなんとかの事を良く分かって無いでｓ コード if (window.devicePixelRatio > 1) $('img').each(function() { var t = $(this); t.attr('src', t.attr('src').replace(/(\.[a-z]+)$/i, "@2x$1")); }); window
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://retinajs.com/
