このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

前回の補足？続きになるのですが、

スマートフォン devicePixelRatio　について

iPhone3GS  iPhone4では解像度に違い（2倍の解像度）により、

配置した画像がピンぼけしちゃいます。（アンドロイドは1.5倍機種によって異なりますが。）

それを回避するため、通常の画像の2倍の画像を用意し、

cssでサイズの調整を行う。って方法を前回紹介しましたが、

通常画像

180px×66px

2倍画像

360px×122px

CSS

<br />
.image img{<br />
width:180px;<br />
height:66px;<br />
}<br />

てな感じで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

<br />
.image{<br />
background-image:url(webcyou-logo.png) no-repeat;<br />
background-position:left top;<br />
}

高解像度デバイス iPhone4等（devicePixelRatio 2.0)用CSS

@media only screen and  (-webkit-device-pixel-ratio: 2){<br />
.image{<br />
background-image:url(webcyou-logo@2x.png) no-repeat;<br />
-webkit-background-size:180px 66px;<br />
background-position:left top;<br />
}<br />
}

このようにCSS3のメディアクエリによるフィルタで、背景画像の読み込みを切り替えることが可能です。