投稿日:2018年5月30日  更新日:

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

Amazonチャージ

Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス6期目/大阪府北摂在住🏠 長野県諏訪市出身🎣学生時代に制作したサイトが評価され新卒で上場企業のWEBデザイナーとして就職。その後数社を渡り歩き、2013年にフリーランスとして独立。現在は主にフロントエンドエンジニアとしてお仕事しています。詳しいプロフィールはこちら

-Jquery / Javascript
-, , ,

Copyright© ヤッテモータース , 2019 All Rights Reserved.