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

ホームページの制作において、当たり前となったレスポンシブデザイン。

レスポンシブサイトとは

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

ウィンドウサイズによってレイアウトやデザインを変更する上でCSSの切り替えは必須になりました。
CSSと同じ要領でJavaScriptも切り替えることで、スマホだけにスライダーを表示させたりと、表現の幅がぐっと広がります。

そんなJavaScriptをデバイスごとに切り替える方法、ウィンドウサイズによって切り替える方法をご紹介します。

デバイスによって分岐

レスポンシブサイトでjavascriptをデバイスによって分岐させる方法

まずはアクセスのあったデバイスによって条件を分岐させる方法です。
ユーザーエージェントの情報をもとに、条件を設定しJavaScriptの処理を変更します。

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を記述
}

スマホだけにスライダーを表示させたい場合などは、そのJavaScriptを❶の箇所に記述、
逆にPC・タブレットではスライダーで見せたいが、スマートフォンでは不要な場合は❷の箇所にJavaScriptを記述します。

もう一つの分岐の方法がウィンドウサイズ(ウィンドウ幅)によって分岐させる方法です。

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

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

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

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

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

1行目でウィンドウサイズを調べ、そのサイズによって分岐する仕組みです。

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

タブレットとPCも分けて3パターン記述したい場合は下記のように記述します。
こちらも「768」「1024」という数字は適宜使い分けてください。

$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を記述
}

まとめ

いかがでしたでしょうか。

CSSをウィンドウサイズによって分けて記述するように、JavaScriptも分けて記述することで、回線速度の早いPCではボタンやページ推移にアニメーションなどを設置し、回線速度の遅いスマホではアニメーションを無しにするなど、よりきめ細やかな配慮や表現ができるようになります。

JavaScriptの分岐を使いこなして、より良いレスポンシブサイトを作り上げましょう!
最後までご覧いただきありがとうございました。

1 Comment

  1. […] これは知らなかった!レスポンシブサイトでjavascriptを分岐させる方法2パ… […]

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Scroll to top