レスポンシブWebデザインのサイトでデバイスやウインドウ幅によってJavaScriptの処理を条件分岐させる

レスポンシブWebデザインでホームページ制作を行うとき、「スマホの時だけJavaScriptの処理を加えたい」なんてことあったりしますよね。

今回はそんな時によく使うJavaScriptの条件分岐について書きたいと思います。

レスポンシブWebデザインではウインドウ幅、またはUA(ユーザーエージェント)によって処理を分けることができる

例えばスマホでホームページを見た時だけ動作させたい画像スライダーがあったとします。

何の情報をもとに条件分岐させればうまくスマホだけで動作させることができるでしょうか。主に2通りの方法があります。

  • ウインドウサイズの横幅によって条件分岐
  • 使用デバイスのUA(ユーザーエージェント)によって条件分岐

前者はCSSのメディアクエリーを使うことでウインドウサイズによってレイアウトを変更させるのと似たような方法です。ウインドウ幅の数値を取得して、その数値をもとにして条件分岐を行います。

後者は使用デバイスがiPhone、iPad、iPodのいずれか、またはAndroidなのかPCなのかを判別してデバイス情報をもとに条件分岐してJavaScriptの処理を出し分けます。

それではそれぞれ書き方を見て行きましょう。

ウインドウサイズの横幅によって条件分岐する

この方法では次のようなコードを利用します。

今回は便宜上640pxのみを条件分岐が起こる横幅として設定していますが、elseifを利用すればPC・タブレット・スマホでそれぞれ処理を変更するなど、より複雑な条件分岐が可能です。

閲覧デバイスのUA(ユーザーエージェント)によって条件分岐

次はサイトを表示させているデバイス情報を取得して条件分岐を行う方法になります。

ユーザーエージェントの情報をもとにしてif文の条件を設定して、JavaScriptの処理を出し分けることができます。

上記の例ではスマホだけ他のデバイスと区別をした条件を設定しています。

以上、レスポンシブWebデザインでよく使うJavaScriptの紹介でした。

参考URL

JavaScriptでiPhoneなのかAndroidなのかを判別する方法

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »