知らなかった！レスポンシブサイトでjavascriptを分岐させる方法２パターン紹介

ホームページ制作において、スマホ・タブレットの普及で当たり前となったレスポンシブデザイン。

ウィンドウサイズによってレイアウトやデザインを変更する上で、CSSの切り替えは必須になりました。

CSSと同じ要領でJavaScriptもPC表示とスマホ表示を切り替えることで、スマホサイトだけにスライダーを表示させる、javascriptの挙動を分けるなど、表現の幅がぐっと広がります。

レスポンシブデザインとは
htmlにjavascriptを適用するには
javascriptを分岐させる方法
- javascriptをデバイスによって分岐
- javascriptをウィンドウサイズによって分岐
まとめ：レスポンシブサイトでjavascriptを分岐させる方法

レスポンシブデザインとは

レスポンシブデザインは、１つのWEBページを閲覧者のウィンドウサイズに応じてレイアウトやデザインを変更し、多様なデバイスに対応しているサイトデザインのこと

スマートフォン・タブレットの普及で、

パソコン
タブレット
スマホ

と、全てのデバイスで整って見えるデザインが必須となりました。

htmlにjavascriptを適用するには

ホームページ制作の際に、コンテンツスライダーの設置やアニメーションなど動きをつけたい場合は、プログラミング言語である「JavaScript（ジャバスクリプト）」が必要となります。

htmlに「JavaScript」を読み込むには、

外部のjsファイルを読み込む
html内に直接JavaScriptを記述

の２パターンの方法があります。

＼詳しくはコチラの記事にてご紹介しています／

Check!

: 【初心者向け】HTMLにJavaScriptを適用する方法を２パターン紹介

続きを見る

javascriptを分岐させる方法

JavaScriptを切り替える方法には、

デバイスによって分岐
ウィンドウサイズによって分岐

の２パターンの方法があります。

それぞれの方法をご紹介します。

javascriptをデバイスによって分岐

まずはサイトにアクセスしたデバイスによって条件を分岐させる方法です。
ユーザーエージェントの情報をもとに、スマートフォン・タブレット・PCなど条件を設定しJavaScriptの処理を変更します。

ユーザーエージェントとは
ユーザがWEBサイトを閲覧する際にサーバー側に自動的に通知している、OS（Windowsやmac）やブラウザの情報のこと

 js
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
// ❶スマホのみに適用させるJavaScriptを記述
} else {
// ❷その他PC・タブレットに適用させるJavaScriptを記述
}

ユーザーエージェントからiOSとAndroid端末を見分け、条件を分岐させます。
スマホだけに適応させるJavaScriptは❶の箇所に記述、
逆にPC・タブレットだけに適応させるJavaScriptは❷の箇所に記述します。

この書き分けにより、PCにはスライダーを表示するがスマホでは非表示にするなどの切り分けが可能です。

ですが、最近はデバイスの多様化から大きなスマホや小さなタブレット・小さなPCも存在してるので、一般的には「ブラウザの幅を参照して条件を切り替える」という方法が主流です。

その方法「ウィンドウサイズ（ウィンドウ幅）」によって分岐させる方法をご紹介します。

javascriptをウィンドウサイズによって分岐

こちらはアクセスのあったデバイスの種類に限らず、ウィンドウサイズの幅によって「○○px以下」ならこっち、「○○px以上なら」こっちとJavaScriptを分岐させていきます。

スマホのみ切り替える場合

まずは、スマートフォンとそれ以外、という２パターンの分岐です。
表示を切り替えるウィンドウサイズ（ブレイクポイント）は768pxとしております。
年々スマートフォンのウィンドウサイズが大きくなってきているので、この数値は適宜調整してください。

 js
var windowWidth = $(window).width();
var windowSm = 768;
if (windowWidth <= windowSm) {
//横幅768px以下（スマホ）に適用させるJavaScriptを記述
} else {
//横幅768px以上（PC、タブレット）に適用させるJavaScriptを記述
}

１行目の記述でユーザーのデバイスのウィンドウサイズを調べます。
２行目以降でそのサイズによって分岐させる仕組みになっています。ブレイクポイント（分岐点）は１つで、スマホとそれ以外（PC・タブレット）という２種類に分類します。

スマホ・タブレット・PCと３パターンで切り替える場合

タブレットとPCも分けて３パターン記述したい場合は下記のように記述します。こちらもブレイクポイント（分岐点）の「768」「1024」という数字はその都度最新の情報から更新し設定してください。

 js
$windowWidth = window.innerWidth;

$breakPointA = 768;
$breakPointB = 1024;

isMobileSize = ($windowWidth < $breakPointA);
isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
isPcSize = ($windowWidth > $breakPointB);

if(isMobileSize){
//横幅768px以下（スマホ）に適用させるJavaScriptを記述
}

if(isTabletSize){
//横幅768px以上、1024px以下（タブレット）に適用させるJavaScriptを記述
}

if(isPcSize){
//横幅1024px以上（PC）に適用させるJavaScriptを記述
}

スマホ・タブレット・PCと３パターンで切り替えるとこのように記述していきます。