ウェブサイトの Retina ディスプレイ対応

Retina ディスプレイを始めとして、Pixel Ratio が1を超えるディスプレイを採用したデバイスが増えてきました。デバイス (OS やアプリケーション) 側で拡大をして表示されますが、うまく拡大してもらえないとぼやけた表示になってしまいます。

そこで、Retina ディスプレイなどの Pixel Ratio が1を超えるディスプレイでもきれいに画像が表示されるための対策を挙げてみます。

CSS

CSS の background-image を Retina ディスプレイに対応するには、Media Query を使います。

@media only screen and (-webkit-min-device-pixel-ratio:2) {
	.SampleClass {
		background-image: url(高解像度画像ファイル);
		background-image: 表示サイズの幅 表示サイズの高さ;
	}
}

IMG と INPUT

JavaScript を使用すれば、window.devicePixelRatio でデバイスの Pixel Ratio を取得できるので、条件分岐で Retina 対応できます。

画像タグと画像タイプのインプットは、src 属性に始めから高解像度ファイルを指定しておき、普通のディスプレイの場合のみ、JavaScript で src 属性から “@2x” を取り除きます。

if (window.devicePixelRatio < 2) {
	$('img, input[type="image"]').each(function() { $(this).attr('src', $(this).attr('src').replace('@2x', '')); });
}

* jQuery を使用しています。

Retina.js

JavaScript のライブラリ Retina.js を読み込めば、画像ファイルのファイル名 (拡張子を除いた) の最後に “@2x” を追加したファイルが存在すれば、置き換えをして表示されます。

高い解像度でファイル名の最後に “@2x” を付けて保存しておくだけで対応できます。(ただし、画像ファイルが同一ドメインに保存されていない場合は対応しません。)

CSS の background-image に対応させるには、LESS を使う必要があります。

favicon.ico

今までは 16 x 16 px でしたが、いろいろなサイズのアイコンファイルを favicon.ico ファイルにまとめる必要があります。複数のサイズを含めたファイルは次のサイトで作成できます。

• AllTheFavIcons
• Bradicon!

まとめ

ということで、既存のウェブサイトを Retina ディスプレイに対応するには Retina.js が早いと思いますが、新たに構築する場合は JavaScript や CSS で Pixel Ration を読み取って対応するのがいいのではないでしょうか。