ブログの記事内画像を楽してRetinaディスプレイに対応させる方法
「Retina な Mac を買ったはいいけど、自分のWebサイトやブログの画像がぼやけて見えるのが気になる」という方は多いと思います。 ロゴ画像であれば Illustrator から SVG 形式で書き出すだけで対応できますが、やっかいなのがブログ本文内の画像です。 メインビジュアルの画像など限られたものであれば、たとえば「image.jpg」という画像の Retina 用として「image@2x.jpg」という縦横2倍の画像を用意することもできると思います。 しかし、ブログ本文内の画像は数も多く、「image@2x.jpg」のようなファイル名の画像もいちいち用意していられないと思います。 そこで、このブログでは jQuery 用の JavaScript を使ってなるべく手間のかからない対応をすることにしました。 このブログでは、WordPress で記事を書くときに［メディアを追加］を
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
