jqueryの実行処理をレスポンシブ時に分岐する方法

JQueryの実行処理をレスポンシブのブレイクポイントによって、条件分岐したいときが稀にあります。
ユーザーエージェントで分岐する方法もありますが、もっと手軽に使いやすいようにレスポンシブのブレイクポイントに合わせた方法について調べてみました。

JQueryの実行処理を条件分岐する

JQueryの実行処理ですが、下記のコードで分岐すると簡単にレスポンシブのブレイクポイントに合わせて条件分岐が可能です。

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

IF文の途中にelse ifを追加して、ブレイクポイントをいくつか追加することによって、さまざまな画面サイズに対応できるので、とても便利にJQueryの実行処理を分岐することが可能です。

次のような書き方も可能なので、ご自身が使いやすい方法で使ってみてください。

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

PCサイズでは正常に動くJQueryがスマホでは弊害になるような際には、今回紹介したような方法でスマホに適用しないようにできるので、とても便利です。

jqueryの実行処理をレスポンシブ時に分岐する方法まとめ

jqueryの実行処理をレスポンシブ時に分岐する方法について紹介してきました。
ますます対応するデバイスが増えていく中で、今回紹介した方法で一部のデバイスには適用しないようにする方法を使用していくことも増えていきそうですね。

今回お伝えした方法もその一つなので、是非参考にしていただければと思います。