javascriptでPCとスマホの表示を分ける（matchMedia）

今日はお腹の腹痛が激痛で痛いので（重言）、ちょっと簡単で短めです。

matchMediaって？

CSSの@mediaqueryみたいな指定の仕方ができるメソッド。
簡単に使い方をまとめます。

  var mediaQuery = window.matchMedia("screen and (max-width: 1060px)");

  function checkBreakPoint(mediaQuery) {

    if (mediaQuery.matches) {
      // trueが返ったとき（この場合画面幅が10６０px以下のとき

    } else {
      // falseのとき（この場合画面幅が1060より大きいとき）
    }

window.matchMediaでmediaQueryを定義し、それをmatchesでチェックしている、ということです。
さらに、それをブレイクポイント変更時すぐに実行したい時は、
以下のように記述します。

  mediaQuery.addListener(checkBreakPoint); //ブレイクポイントにきた瞬間コールバック関数を実行

これで魔法使いになれるそうです。

うう、何か当たったのかな、、、