iPhone 4のRetina Displayでコンテンツを美しく表示させるためのコーディング方法についての考察。iPhone 4のディスプレイは高解像度なので、画像をよりきめ細かく表示させる事ができます。けど画像のサイズそのものを大きくしちゃうと、PCサイトでのバランスが崩れるという弊害が。そこんところをウマく表示を切り替えるという、コーディングのTipsが紹介されてます。デモページをPCとiPhone 4とで見比べるとその効果は歴然。PC上では同じに見えるアイコンも、iPhone 4で見るとピクセルの密度の違いがハッキリと分かります。仕組みはCSSを使って表示させる画像を切り替えているようです。その分画像を解像度別に2つ用意する必要があるので、手間と言えば手間ですが、iPhoneのRetina Displayを活かしたい時には使えるTips。ブログやポートフォリオサイトなどにおけるサムネール表示にちょうどイイかも。

How to make your web content look stunning on the iPhone 4’s new Retina display