スマホサイトの制作で使う事も多いCSSのMedia Queriesですが、デバイスの解像度やデバイスが縦長か横長でも振り分けが出来たんですね。
恥ずかしながらちょっと前まで知りませんでした。なのでメモ程度に記事にしておこうと思います。
デバイスの解像度で振り分ける
解像度はDevice Pixel Ratioという値で振り分けます。Device Pixel Ratioは、CSSのピクセル1に対して、デバイスのピクセルがどれだけの密度で現せるかというものらしいです。文章にするとわかりづらい…。
下記の記事がわかりやすくてお勧めです。
いまさら聞けないRetina対応のための「ピクセル」の話
さて、解像度で分けたい場合のMedia Queriesの書き方は以下のようになります。
@media screen and (-webkit-device-pixel-ratio:2) {
p {font-size:120%;}
}
現在出回っているデバイスでのDevice Pixel Ratioの相対は1.0〜3.0まで幅があるようです。いくつかリストアップすると下記のようになっています。これら以外にも、デバイスによっては1.3とか1.5とかあるみたい。
-webkit-device-pixel-ratio:1
・iPhone 3GS
・iPad 2
・Samsung Galaxy S
-webkit-device-pixel-ratio:2
・iPhone 4S〜iPhone 5s
・iPad (3rd generation)
・Google Nexus 10
・Sony Xperia T
-webkit-device-pixel-ratio:3
・Nexus 5
・Samsung Galaxy Note 3
・Sony Xperia Z
デバイスが縦長か横長かで振り分ける
こちらorientationはページを表示しているデバイス画面が縦長か横長か判定して、CSSを振り分けてくれます。なので、例えばこれはスマホやタブレット以外の、PCディスプレイにも適用されるので注意が必要です。ちなみに縦横が同じ長さの場合はportraitが適用されるようです。
//デバイスが縦長の場合
@media screen and (orientation: portrait) {
p {font-size:100%;}
}
//デバイスが横長の場合
@media screen and (orientation: landscape) {
p {font-size:90%;}
}
…実はこの記事を書く前は、orientationってデバイスの向きを縦か横か判定してくれるものかと思っていました。検索しても縦向きか横向きかで判定してくれるっていう記事が多いので。今回ちゃんと調べてみてよかったです。
