レスポンシブデザインに欠かせないデバイス判定について

はじめに

• レスポンシブデザインに欠かせないデバイス判定を行う方法をメモしていきます。

画面幅による切り替え

window.matchMedia

if (window.matchMedia("(max-width: 768px)").matches) {
  // ここにビューポート768px以下の挙動を記述
} else {
  // ここにビューポート769px以上の挙動を記述
}

• ビューポートを基に判定し、考え方としては css のメディアクエリと同じです。
• matchMediaはMediaQueryListオブジェクトを返し、オブジェクトが持っているmatchesプロパティは渡した引数に対してbooleanの値を返します。
• 上記のコードの場合、引数に渡したmax-width: 768pxに対してビューポートが 768px 以下だったらmatchesプロパティからtrueが返ってきます。

window.innweWidth

if (window.innerWidth <= 768) {
  // ここにビューポート768px以下の挙動を記述
} else {
  // ここにビューポート769px以上の挙動を記述
}

• innerWidthはスクロールバーを含むウインドウ幅を値で返します。
• 数値で返ってくるので直感的にわかりやすいです。

おわりに

• matchMediaは css と同じ記述ができ、返ってくる値もtrueかfalseなのでわかりやすいです。
• innerWidthはスマホの場合だとonresizeが頻繁に起こり、端末への負荷が大きくなるようです（参考：window.matchMedia をそろそろ活用してもいい頃
• matchMediaは IE9 以下は対応していないということですが、IE のサポートが 2022 年 6 月 15 日で終了するとなるとmatchMedia（一択？）がよさそうです。