Jquery / Javascript

スマホのときだけ動作させたい!Jqueryでレスポンシブのブレークポイントを指定する

ウィンドウサイズにあわせてJavascriptを動作させたいページ場合、Jqueryでもレスポンシブのブレークポイントの指定が可能です。

忘れがちなコードなのでメモ。

サンプルコード


if (window.matchMedia( "(max-width: 768px)" ).matches) {
/* ウィンドウサイズが 768px以下の場合のコードをここに */
} else {
/* ウィンドウサイズが 768px以上の場合のコードをここに */
}

応用


if (window.matchMedia( "(max-width: 768px) and (min-width: 480px)" ).matches) {
/* ウィンドウサイズが 480px以上768px以下の場合のコードをここに */
}

レスポンシブ時のみ動作させたいJavascriptを書きたい場合はこのようにするとうまくできますよ。

created by Rinker
¥2,786
(2018/10/20 13:25:30時点 Amazon調べ-詳細)

COMMENT

メールアドレスが公開されることはありません。