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

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

概要

汎用的に使用できるJavaScriptにおけるブレイクポイントの設定。
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

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録