テクニックの内容はCSS3で策定が進められているMedia

iphone webデザイン

“

文字のようにスケーラブルなデータが普及しているものはいいが、JPEG/PNG/GIFのような画像データの場合は問題だ。大きくすればその分だ
け表示が汚くなる。この問題に対する対処方法は2つある。ひとつは画像をSVGのようなスケーラブルなデータとして作成し直すこと、もうひとつは高解像度
でデータを用意しておき利用する解像度ごとに適切にスケールダウンした画像を提供するというものだ。

後者の方法を使う場合のテクニックが次のサイトにまとまっている。

テクニックの内容はCSS3で策定が進められているMedia
Queriesを活用して、デバイス・ピクセル比率が2以上のブラウザに対しては4倍解像度の画像を使うようにしたCSSファイルを追加で読み込
ませるというもの。デバイス・ピクセル比率の問いかけに対応しているブラウザに対しては、その解像度に適した画像を提供するというわけだ。

iPhone SDK
4では画像ファイル名の最後に「@2x」という何前をつけておけば、状況に応じて自動的にこの「@2x」が付けられた画像が使われるようになる。こうする
ことでiPhone 3GS以前のデバイスでもiPhone
4以降のデバイスでも適切な画像が選択される仕組みになっている。Webブラウザにはこうした共通規格は存在しないため、Media
Queriesを使って提供する画像を変更するというのは今のところ有力なテクニックのひとつといえる。もちろん今後「@2x」と同じテクニックがWeb
ブラウザとHTTPサーバでも実装され普及していく可能性もあり、どういった方法がデファクトスタンダードになっていくかはまだわからない。

従来のデバイス、これから登場することになるであろう高解像度ディスプレイを搭載したデバイス、そうした多種多様なデバイスに対して美しく表示され
るコンテンツを提供するには異なるどのDPIに対しても美しく表示されるように工夫する必要がある。異なるDPIを意識したコンテンツ開発の重要性は今後
さらに増すことになるとみられる。

”

style="margin-top:10px;">





—
【レポート】iPhone 4に対応したWebサイトを作る方法 | エンタープライズ | マイコミジャーナル