This is standard

KAIZEN PLATFORM社が提供するA/Bテストプラットフォームにてグロースハックを行っているフリーランサーのサイトです。

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

   

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

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

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

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

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

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

お試しください!!

 - Tips, レスポンシブWebデザイン

  関連記事

jQueryでA/BテストができるプラグインeasyAB

LPなどのA/Bテストを簡単に実施できるjQueryプラグインeasyABのご紹 …

MovableTypeでイベントやフェアブログを構築するときに使えるテンプレート

MovableTypeでイベント情報ブログを構築するときに使えるテンプレートをご …

FutureShop2のfs2api.jsを利用してユーザー名を取得する方法

FutureShop2にはfs2api.jsが用意されていて、ユーザー名などログ …

jQuery正規表現を使って金額を抽出するには

ある案件で、動的に価格表記を変更したいとの依頼がありました。 そこで正規表現を使 …

Googleタグマネージャーを反映させるときの注意点

Googleタグマネージャーはとても便利なんですが、「公開」設定を忘れるとえらい …

LPで使えるjQueryアニメーションボタン

LPでgifアニメーションボタンが一時流行りましたが、ボタンを作るのは結構時間も …

CSS3でグラーデーションのアニメーションをつける

タイトルをみると???かと思いますので、デモをご覧ください。 ※古いブラウザでは …

ECサイトで使いたい!カウントダウンをjavascriptで実装する

新作商品販売まで後◯◯日!のようなカウントダウンをjavascriptで実装する …

【ECサイト】javascriptで出荷日時を自動で表示する方法

Amazonをはじめ、多くのオンラインショップで即日配送を実施されてますよね。 …

FutureShop2(フューチャーショップ)でフォーム改善するときの注意点

FutureShop2はhttps://~領域のデザインも編集できる優れたASP …