iphoneサイトのコーディングを依頼されてデザイン渡されたときに、
そのままスライスしてコーディングしたら、
なんか画像がぼやけてるーーー
みたいなことありませんか?
iphoneは320×480の画面サイズで、そのサイズのデザインを入れているのになぜ!?
これ、実はretinaディスプレイのせいです。
iphone4以降では、Retina displayという高解像度のディスプレイが採用されていて、320×480pxサイズの画面の中に、実は2倍の640×960px分が詰込まれてます。
なので、ぼやけさせずに、キレイな画像をみせたいときは、単純に2倍のサイズの画像を用意します。
ただ、ちょっと面倒ですが、2倍のサイズの画像をそのまま置くと、でかい画像になっちゃうので、2倍の画像を用意した上で、当初のサイズまでcssやimgのwidthプロパティで縮める必要があります。
めんどうっすね。
とりあえず覚えておきたいのは、スマホのコーディングを頼まれたら、2倍のサイズでデザイン下さいって言っておくことです。
そのままスライスしてコーディングしたら、
なんか画像がぼやけてるーーー
みたいなことありませんか?
iphoneは320×480の画面サイズで、そのサイズのデザインを入れているのになぜ!?
これ、実はretinaディスプレイのせいです。
iphone4以降では、Retina displayという高解像度のディスプレイが採用されていて、320×480pxサイズの画面の中に、実は2倍の640×960px分が詰込まれてます。
なので、ぼやけさせずに、キレイな画像をみせたいときは、単純に2倍のサイズの画像を用意します。
ただ、ちょっと面倒ですが、2倍のサイズの画像をそのまま置くと、でかい画像になっちゃうので、2倍の画像を用意した上で、当初のサイズまでcssやimgのwidthプロパティで縮める必要があります。
めんどうっすね。
とりあえず覚えておきたいのは、スマホのコーディングを頼まれたら、2倍のサイズでデザイン下さいって言っておくことです。