【JavaScript】スマホとPCを判断する条件分岐|iPhone・Android

JavaScriptを使用していると、スマートフォン・タブレット・PCによって処理を変えたい場合があるかもしれません。

今回は、そのような場合に使用できるJavaScriptの例となり、サイトアクセス時のブラウザのユーザーエージェントの値を使い、スマホ・タブレット・PCの条件分岐を行います。

また、例は以下の2パターンの条件分岐となります。

  • 「スマホ・タブレット」と「PC」の条件分岐
  • 「スマホ」と「PC・タブレット」の条件分岐

「スマホ・タブレット」と「PC」の条件分岐

以下は、「スマホ・タブレット」と「PC」を判断する条件分岐の例となります。

また、例ではスマホ・タブレットの条件をiOS・Androidのデバイスとしています。

if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
	// スマホ・タブレット(iOS・Android)の場合の処理を記述
}else{
	// PCの場合の処理を記述
}

「スマホ」と「PC・タブレット」の条件分岐

以下は、「スマホ」と「PC・タブレット」を判断する条件分岐の例となります。

また、例ではスマホの条件を、Androidスマホ・iPhone・iPod touchのデバイスとしています。

if(navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)){
	// スマホ(iPhone・Androidスマホ)の場合の処理を記述
}else{
	// PC・タブレットの場合の処理を記述
}

ソースコードの説明

以下、ソースコードのポイントとなる箇所の説明となります。

ユーザーエージェントの取得|navigator.userAgent

例ではデバイスの種類を判断するために、navigatorオブジェクトのuserAgentプロパティを使い、ブラウザのユーザーエージェントを取得しています。

navigatorオブジェクトでは、その他のブラウザの情報も取得できます。詳しくは、以下のリンク先を参考にしてみてください。

JavaScriptリファレンス(オブジェクト別)Navigatorブラウザ

正規表現を使い文字列を検索|match()メソッド

match()メソッドは引数に指定した正規表現を、文字列のオブジェクトから検索し一致した文字列を返します。

例では、navigator.userAgentで取得したユーザーエージェントの文字列から、引数に指定した正規表現を検索しマッチするかを確認しています。

また、引数の正規表現は、判断するデバイスによって以下のように指定しています。

  • 「スマホ・タブレット」を判断する場合には、iPhone、iPad、iPod、Androidのいずれかの文字列の場合
  • 「スマホ」を判断する場合には、iPhone、iPod、Android.*Mobileのいずれかの文字列の場合

また、Android.*Mobileは、ユーザーエージェント内にAndroidとMobileの文字列がある場合となり、Androidスマホの場合のユーザーエージェントとなります。

その他のブラウザのユーザーエージェントについては、以下のリンク先を参考にしてみてください。

UserAgentからOS/ブラウザなどの調べかたのまとめ - Qiita

参考サイト、参考書籍

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。