jQueryでブレイクポイントを通過したタイミングを検出する

サンプル

「パソコン → スマホ」への切り替わりと「スマホ → パソコン」の切り替わりの両方を検知できる。

ブレイクポイントが2つ以上ある場合(= タブレット用の表示もある等)は対応していないので注意。

メリット・デメリット
メリット
js内に「ブレイクポイントの数値」を記載しなくて良いので、ブレイクポイントが変更になってもjsを変更する必要がない
(windownの幅で判定する場合はソース内にブレイクポイントを記述する必要があるので、ブレイクポイントが変更になるとソースも変更が必要)
デメリット
「PCで表示(shown-on-pc)」と「SPで表示(shown-on-sp)」のCSSがないとダメ、jsだけで完結しない

ソースコード

HTML
CSS
CSS(レスポンシブ)
jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です