JavaScript でビューポート幅に応じて処理を分ける

JavaScript でビューポート幅に応じて処理を分けるには、 window インターフェースの matchMedia() にメディアクエリ文字列を渡し、返された MediaQueryList オブジェクトの matches プロパティを使用する。

if (window.matchMedia('(min-width: 1024px)').matches) {
  console.log('This is wide screen')
} else {
  console.log('This is narrow screen')
}

matchMedia() はメディアクエリ文字列を受けとるので、 window.matchMedia('(orientation:landscape)') のように書けば、ビューポートの向きに応じて処理を分けることもできる。