JSの発火タイミングをブレイクポイントで制御し、デバイスサイズごとに別々の処理を実行する

概要

用途・要件

• デバイスのwidthによってJavaScript処理を変更（ブレイクポイント切り替わりのタイミングでRunさせる）
• デバイスによってボタンクリック時の挙動を変えたい（PCではタブ切り替え、SPではアコーディオン 等）
• IE9以下に対応したバージョンも用意
  • IE9以下window.matchMedia が非対応のため、こちらを使用

• jQuery バージョン2.2.4使用。

注意事項

• 本記事では各ブレイクポイントで処理が走るタイミングが把握しやすいようにalertを実行しています。

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)
• IE11

実装方法

下記サイトから/dist/jquery.breakpoints.min.jsを取得する。
https://github.com/dawn-inc/jquery.breakpoints.js