【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
スマフォンサイト iPhone4等の高解像度デバイス対応 画像を cssでの切り替え
前回の補足？続きになるのですが、 スマートフォン devicePixelRatio について iPhone3GS iPhone4では解像度に違い（2倍の解像度）により、 配置した画像がピンぼけしちゃいます。（アンドロイドは1.5倍機種によって異なりますが。） それを回避するため、通常の画像の2倍の画像を用意し、 cssでサイズの調整を行う。って方法を前回紹介しましたが、 通常画像 180px×66px 2倍画像 360px×122px CSS .image img{ width:180px; height:66px; } てな感じで2倍画像を配置しCSSで通常サイズに調整することによって、 iPhone3g（devicePixelRatio 1.0）とiPhone4g（devicePixelRatio 2.0）の様に 異なる解像度（devicePixelRatio）でも綺麗に表示できます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
