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

はじめに レスポンシブデザインに欠かせないデバイス判定を行う方法をメモしていきます。 画面幅による切り替え window.matchMedia if (window.matchMedia("(max-width: 768px)").matches) { // ここにビューポート768px以下の挙動を記述 } else { // ここにビューポート769px以上の挙動を記述 } ビューポートを基に判定し、考え方としては css のメディアクエリと同じです。 matchMediaはMediaQueryListオブジェクトを返し、オブジェクトが持っているmatchesプロパティは渡した引数に対してbooleanの値を返します。 上記のコードの場合、引数に渡したmax-width: 768pxに対してビューポートが 768px 以下だったらmatchesプロパティからtrueが返ってきます。 wi