CSS メディアクエリ

[hysryt]

デバイスピクセル比

デバイスピクセル比での切り替えには min(max)-resolution を使用する。 Safari は対応していないので代わりに -webkit-min(max)-device-pixcel-ratio を使用する。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body {
    background-image: url('bg@2x.jpg');
  }
}

dppx は dot per pixel の略で 1px あたりのドット数。距離で見た場合の 1px なので デバイスピクセル比が 2 の場合は 2dppx。4dppxではない。

min(max)-resolution には dppx 以外に dpi 、dpcm が使用できるが、デバイスピクセル比を指定するなら min(max)-device-pixel-ratio の指定値に単位をつけるだけの dppx が一番使いやすい。

dpi でも記述はできる。CSSの仕様では 1インチ は 96px 。Retina ディスプレイだろうが普通のディスプレイだろうが CSS 上では 1インチ = 96pxなので、 1dppx の時は 96dpi となる。これをもとに計算すると 2dppx の場合は 192dpi になる。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    background-image: url('bg@2x.jpg');
  }
}

IE11 はdppx に対応していないので dpi で記述する。しかし IE11 かつ デバイスピクセル比が 1 より大きい環境はかなり少ないし 1dppx = 96dpi というのも覚えづらいので無視してもいいと思う。

min(max)-device-pixel-ratio は Apple が Retina ディスプレイ開発時に作った独自メディアクエリで、標準規格ではない。

https://developer.mozilla.org/ja/docs/Web/CSS/resolution

[hysryt]

ランドスケープ（横向き）なスマホの判定

• max-height: 767px メディアクエリ → 767px はでかすぎる。PCも範囲に入ってしまう。
• max-height: 450px メディアクエリ → まあまあいいかも

---

より排他的にする場合は orientation も使う。

/* 横向きスマホ */
@media (orientation: landscape) and (max-height: 450px) {
  ...
}

/* 縦向きスマホ */
@media (orientation: portrait) and (max-width: 767px) {
  ...
}

---

縦横関係なくスマホ指定の場合は max-width: 767px だけでいいと思う → PCで横767pxで見る人は少ないから