This is standard

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

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

   

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

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

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

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

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

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

お試しください!!

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

  関連記事

[jQuery]id順に要素を並び替える

idを付与して並び替える方法の覚書です。 parseIntで並び替える方法もあり …

jQueryで空白文字を削除する

テキストだけ取り除きたいときはtrime()を使います。 ・HTML [cray …

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

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

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

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

Googleアナリティクスでフィルタをかける

上のグラフはこのサイトのセッション数を表しています。 見てわかるようにまだ全然ア …

jQuery cookie.jsを利用して次回訪問時にクーポンを表示する方法

使い方はアイデア次第! 簡単にcookieを使ってポップアップを表示する方法のご …

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

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

instagramのuser idを取得する方法

※2016.09.08追記 こちらのサイトのテキストボックスにuser名を入力す …

マークアップにschema.orgを利用してGoogleフレンドリーなページを作成しよう

Googleのリッチスニペットで知られているスキーマを利用して商品詳細ページをマ …

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

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