JavaScriptで画面幅が指定値より大きいか小さいかを判定する方法【matchMedia活用】

JavaScriptを使って、画面幅が特定の値より大きいか小さいかを判定する方法を解説します。リサイズイベントと matchMedia() を組み合わせれば、ブラウザの幅に応じた処理を簡単に実装できます。

Web開発では、「条件に応じてコードを実行したい」という場面がよくあります。たとえば、大画面では表示したいけれど、スマートフォンのような小さな画面ではスペースの関係上、表示したくないコンテンツがあるといったケースです。

なお、デバイスの種類そのものを判定する処理は非常に複雑で、開発者の間でも意見が分かれる分野です。確実性の高い情報がまだ十分に集まっていないため、この記事ではよりシンプルで実用的な「画面幅（ピクセル値）による判定」に絞って紹介します。

ピクセル値で画面幅を動的に検出する方法

幸い、ピクセル値をもとに画面サイズを判定するのはとても簡単です。しかも、このテクニックはさまざまな場面で役立ちます。

まずは以下のコードを、ブラウザのコンソールやCodePenなどのオンラインエディタに貼り付けてみてください。

window.addEventListener("resize", function() {
  if (window.matchMedia("(min-width: 500px)").matches) {
    console.log("Screen width is at least 500px")
  } else {
    console.log("Screen less than 500px")
  }
})

コードを貼り付けたら、ブラウザウィンドウを狭くしたり広くしたりしてみましょう。コンソールに判定結果が出力されるのが確認できるはずです。

コードの仕組みを解説

• まず、window オブジェクトに対して addEventListener() メソッドでイベントリスナーを登録します。
• イベントリスナーには2つの引数を渡します。1つ目は文字列の 'resize'、2つ目は無名関数 function() {} です。
• 1つ目の引数 'resize' は、リサイズイベントを監視するよう指定しています（わずかなサイズ変更でもイベントとして検出されます）。2つ目の引数は、リサイズイベント発生時に実行される無名関数です。
• 無名関数の中では、2つの条件分岐を設定しています。
• 1つ目の条件：「任意のデバイスの画面幅が500px以上であれば、console.log('do something') を実行する」。2つ目の条件：「画面幅が500px未満であれば、console.log('do something else') を実行する」。

window.matchMedia() とは？

matchMedia() は、CSSのメディアクエリと同じ書式で条件を指定し、その条件が現在の画面に一致しているかどうかを true / false で返すメソッドです。ここでは (min-width: 500px) という条件を指定しているため、「画面幅が500px以上かどうか」を判定できます。CSSのブレークポイントと同じ考え方でJavaScriptの処理を切り替えられる点が大きなメリットです。

window.innerWidth を使う代替手段

window.innerWidth を使って、次のように書くこともできます。

if (window.innerWidth >= 500) {
  console.log("Screen width is at least 500px")
} else {
  console.log("Screen less than 500px")
}

どちらの方法でも同じ判定は可能ですが、matchMedia() の方がメディアクエリとの一貫性があり、細かい条件（向きや解像度など）にも対応できるため、実務ではこちらが推奨されることが多いです。

CodePenなどでコードを実際に動かして、挙動を試してみてください。