こんにちは、福岡のホームページ制作シンス株式会社の越水です。
レスポンシブWebデザインでホームページ制作を行うとき、「スマホの時だけJavaScriptの処理を加えたい」なんてことあったりしますよね。
今回はそんな時によく使うJavaScriptの条件分岐について書きたいと思います。
目次
レスポンシブWebデザインではウインドウ幅、またはUA（ユーザーエージェント）によって処理を分けることができる
例えばスマホでホームページを見た時だけ動作させたい画像スライダーがあったとします。
何の情報をもとに条件分岐させればうまくスマホだけで動作させることができるでしょうか。主に2通りの方法があります。
- ウインドウサイズの横幅によって条件分岐
- 使用デバイスのUA（ユーザーエージェント）によって条件分岐
前者はCSSのメディアクエリーを使うことでウインドウサイズによってレイアウトを変更させるのと似たような方法です。ウインドウ幅の数値を取得して、その数値をもとにして条件分岐を行います。
後者は使用デバイスがiPhone、iPad、iPodのいずれか、またはAndroidなのかPCなのかを判別してデバイス情報をもとに条件分岐してJavaScriptの処理を出し分けます。
それではそれぞれ書き方を見て行きましょう。
ウインドウサイズの横幅によって条件分岐する
この方法では次のようなコードを利用します。
1 2 3 4 5 6 7 | var windowWidth = $(window).width(); var windowSm = 640; if (windowWidth <= windowSm) { //横幅640px以下のとき（つまりスマホ時）に行う処理を書く } else { //横幅640px超のとき（タブレット、PC）に行う処理を書く } |
今回は便宜上640pxのみを条件分岐が起こる横幅として設定していますが、elseifを利用すればPC・タブレット・スマホでそれぞれ処理を変更するなど、より複雑な条件分岐が可能です。
閲覧デバイスのUA（ユーザーエージェント）によって条件分岐
次はサイトを表示させているデバイス情報を取得して条件分岐を行う方法になります。
1 2 3 4 5 | if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { // スマホ時に行う処理を書く } else { // PC・タブレット時に行う処理を書く } |
ユーザーエージェントの情報をもとにしてif文の条件を設定して、JavaScriptの処理を出し分けることができます。
上記の例ではスマホだけ他のデバイスと区別をした条件を設定しています。
以上、レスポンシブWebデザインでよく使うJavaScriptの紹介でした。
参考URL
JavaScriptでiPhoneなのかAndroidなのかを判別する方法
ホームページの新規制作やリニューアルのご依頼はシンス株式会社まで。
