WEBのRetina対応

Pocket

新型のiPad MiniもRetina化されたので128Gモデルを買いたいシステムの中村です。

最近のスマートフォン・タブレットはかなりの数が高精細ディスプレイ(Apple製品ではRetina)化されていますが、それに伴いWEB製作の現場にもRetina対応の案件もちらほら出てきてるようです。

iOS ネイティブアプリ開発ではかなり前からAppleがretina対応しないと審査を通さないなど積極的に動いていますが、どうしてもサイト作成だとどうしてもなかなか費用対効果がよく無いのではありますが、これからのご時勢必要になってくる技術だと思います。

さて前置きはさておいて

実際に実験してみます。


標準 Retina対応
<img src="/images/pretz.png" width="250" />

横幅250ピクセルの画像を横幅250で表示(等倍)

<img src="/images/pretz@2x.png" width="250" />

横幅500ピクセルの画像を横幅250で表示(2倍)


通常のモニターではわかりにくいのですが、retina対応モニター等で見ると違いがわかります。画像を拡大していただくと如実にわかります。

ほかにもjqueryを使った方法などもありますが、それはまた別の機会に書きます。

このネタをまとめて一度社内で勉強会を開きたいなと思っているので、その時の資料も一緒に公開できればと・・・・時間を見つけてまとめるかうんそうしよう