jQueryプラグインbreakpoints.jsを使って、設定したブレークポイントを監視し、イベント変更。
ブラウザのウィンドウ横サイズを変更すると、設定したブレークポイントを監視し、下のボックス「Active Breakpoints」内にブレークポイントを表示するなどのイベントを表示、変更します。この例では、ブラウザのウィンドウ横サイズをブレークポイントとして監視しているので、CSS3のmedia queryで実装するブラウザ画面の横サイズ変更監視と酷似していますが、スクリプトで実現している分、多機能です。
CSS3のmedia queryを使ったデバイスの方向確認、振り分け
CSS3のmedia queryを使って、デバイスとブラウザ画面の横サイズ確認、振り分け
CSS3のmedia queryを使って、デバイスの解像度にあわせたレイアウト変更
利用可能な最大のブレークポイントを使用
Active Breakpoints
1024 px
768 px
480 px
320 px
Event Log: