【CSS3】高解像度用スマートフォン用のメディアクエリ指定方法

スマートフォンのブラウザ(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 {
 
    }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>