Tips

レスポンシブWebサイトでjQueryでブレイクポイントを判定する方法

  • このエントリーをはてなブックマークに追加

レスポンシブWebデザイン制作でPCではjsライブラリを使いたいが、SPでは使いたくないというご要望を頂きました。
PC用、SP用にHTMLを用意してブレイクポイントで表示・非表示を分けるのもありですが、コード量が増えてしまうので回避したいところです。

そこでjQueryのresize()メソッドを使用してワンソースで実装する方法をご紹介します。

■サンプルコード(ブレイクポイントは767pxです)

ここでポイントになるのがウィンドウサイズの取得になります。
よくサンプルコードでは下記が使われると思います。

ご経験のある方は分かると思うのですが、若干ブレイクポイントと誤差がでてしまいます。

そこで指定したブレイクポイントで判別したいときは下記のコードで指定すると、きれに判別できます。

お試しください!!

  • このエントリーをはてなブックマークに追加