スマフォンサイト iPhone4等の高解像度デバイス対応 画像を cssでの切り替え
2011.02.27
この記事は最終更新日から1年以上が経過しています。
前回の補足？続きになるのですが、
スマートフォン 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）でも綺麗に表示できます。
この方法でも問題ないのですが、
iPhone3g等（devicePixelRatio 1.0)の時でも2倍の画像を読み込んでから縮小させるとなると、
パフォーマンスが落ちる結果となります。
そこで、devicePixelRatioが1のデバイスの場合は通常サイズの画像を読み込み
2の場合のデバイスは2倍サイズの画像を読み込むように
cssで読み込む画像の切り替えを行いましょう。
そうする事によってパフォーマンスの向上をはかれます。
画像を背景指定するようになります。
通常 iPhone3g等（devicePixelRatio 1.0)用CSS
.image{
background-image:url(webcyou-logo.png) no-repeat;
background-position:left top;
}
高解像度デバイス iPhone4等（devicePixelRatio 2.0)用CSS
@media only screen and (-webkit-device-pixel-ratio: 2){
.image{
background-image:url(webcyou-logo@2x.png) no-repeat;
-webkit-background-size:180px 66px;
background-position:left top;
}
}
このようにCSS3のメディアクエリによるフィルタで、背景画像の読み込みを切り替えることが可能です。
