iphoneサイトのコーディングを依頼されてデザイン渡されたときに、
そのままスライスしてコーディングしたら、
なんか画像がぼやけてるーーー

みたいなことありませんか?

iphoneは320×480の画面サイズで、そのサイズのデザインを入れているのになぜ!?


これ、実はretinaディスプレイのせいです。

iphone4以降では、Retina displayという高解像度のディスプレイが採用されていて、320×480pxサイズの画面の中に、実は2倍の640×960px分が詰込まれてます。

なので、ぼやけさせずに、キレイな画像をみせたいときは、単純に2倍のサイズの画像を用意します。


ただ、ちょっと面倒ですが、2倍のサイズの画像をそのまま置くと、でかい画像になっちゃうので、2倍の画像を用意した上で、当初のサイズまでcssやimgのwidthプロパティで縮める必要があります。

めんどうっすね。

とりあえず覚えておきたいのは、スマホのコーディングを頼まれたら、2倍のサイズでデザイン下さいって言っておくことです。