2013/02/18

Retinaに対応

Category: コンピュータ,日記・雑記 — Annexia @ 20:00

 このブログをRetinaディスプレイに対応しました.
 とはいっても、とくにたいしたことをしたわけではないのですが.

 自分は、MacBook Retina 13inch、iPad 3rd、iPhone 5といったハードウェアでWebを見ているのですが、どれもRetinaディスプレイと呼ばれる、通常の4倍の解像度の液晶です.
 Mac OS XやiOSは、テキストをアウトラインフォントで処理するので縦横2倍つまり4倍の解像度で表示され、非常になめらかで美しく表示されます.
 画像も同様に4倍の解像度で表示されるのですが、しかしながら320×240ドットで表示するように組まれたところには当然ながら320×240ドットの画像が用意されているわけで、それを拡大してもぼやけた映像にしかなりません.

 そこで、4倍の解像度の画像を用意して、縦横1/2のサイズで表示するようにしてみました.
 Appleの推奨は画像ファイルの後ろに「@2x」という文字を追加した拡大画像ファイルを用意して、ディスプレイ解像度に応じて使い分けるという方法なのですが、安直な方法で対応しました.
 また、今までは画像をクリックすると大きめの画像がポップアップする仕掛けになっていましたが、それを廃止し(従来のページはそのまま対応)、最初から大きめの画像で表示できるように幅を広げました.

 いちおう、Windowsも含めていくつかのブラウザで確認してみましたが、もしレイアウトから画像がはみ出すようであれば、cssファイルが更新されていない可能性があるのでリロードしてみてください.