スマートフォンのブラウザ(WebKit系)ではdevicePixelRatioというプロパティが定義されていて、
画像1pxを実際のデバイス上で何pxとして描画するかという指定をしている。

スマートフォン(縦)の横幅は320pxとして考えるのが一般的であるが、実際の解像度は端末ごとに違うため、それぞれdevicePixelRatioプロパティの定義によって帳尻を合わせている。

CSS3のメディアクエリ(@media)を使ってデバイスの横幅ごとにデザインを切り替える場合、スマートフォンの横幅=320pxと決めつけてしまうと、iphone4や高解像度Android端末ではうまくいかない。


対象端末のdevicePixelRatioプロパティに対してメディアクエリを指定する事で対応できる。
現在の出回っている端末のdevicePixelRatioは「1」,「1.5」,「2」があり、1はそのまま表示すればいいので、1.5と2を対象に加える。

/* 320px以下(スマートフォン縦・横) */
@media
only screen and (max-width: 320px),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    div#contents {
 
    }
}