Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[Web Design] How to make your web content look stunning on the iPhone 4’s new Retina display – ウェブコンテンツをiPhone 4のRetina Displayで美しく表示させるためのTips

  • Pocket
  • このエントリーをはてなブックマークに追加

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください