スマホのときだけ動作させたい!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を書きたい場合はこのようにするとうまくできますよ。

 

よく読まれている人気記事

1

新居に引っ越してから我が家のインターネットはJ:COM NET(120MB)を利用しています。 以前Wi-Fi中継機を導入して快適インターネットを構築した記事を書きましたが、その後別の問題が起きてしま ...

2

新婚旅行でハワイに行ったときに買ってきたソルトスクラブとシアボディバターの紹介です。 ご自身用にもお土産用にもおすすめですので、ハワイに行かれた際にはぜひどうぞ! 見た目もかわいいソルトスクラブ「So ...

3

TOKYO MXで放送中の情報番組「5時に夢中!」の人気コーナー「中瀬親方のエンタメ番付」で紹介されたおすすめ作品を紹介します。(2018年5月31日放送分) 新潮社出版部部長の中瀬ゆかりさんが感銘を ...

Copyright© ヤッテキュー! , 2018 All Rights Reserved.