メディアクエリでJSの利用を区別

主にanimate.cssとwow.jsの利用でWEBのアニメーションをする時に、
スマホとかでは、見づらいので、アニメーションをしたくない時に
どうしようかと思っていました。

以下は、javascript内のコードです(該当のphpやhtmlの文末に書く)


    var mediaQuery = matchMedia('(max-width: 576px');

    // ページが読み込まれた時に実行
    handle(mediaQuery);

    // ウィンドウサイズが変更されても実行されるように
    mediaQuery.addListener(handle);

    function handle(mq) {
        if (mq.matches) {
        // ウィンドウサイズが798px以下のとき
        } else {
        // それ以外
                  new WOW().init();
        }
    }

参考にしたのは、以下のサイトです

https://spyweb.media/2018/01/10/css-media-queries-in-js-matchmedia/