【JavaScript】スマホとPCを判断する条件分岐｜iPhone・Androidなどをユーザーエージェントで判断

このページでは、サイトアクセス時にブラウザが送信するユーザーエージェント(UA)を利用したモバイル・PCの条件分岐の例となりますが、ブラウザの Google Chromeではユーザーエージェントを段階的に廃止する予定となっています。

モバイルとPCの判断には画面サイズを利用する方法もあります。詳しくは以下のリンク先を参考にしてみてください。

【JavaScript】スマホとPCの判断など、画面サイズで条件分岐をする例｜メディアクエリを判断

モバイル・PCをユーザーエージェントで判断

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

今回は、そのような場合に使用できるJavaScriptの例となり、ユーザーエージェントを利用してスマホ・タブレット・PCの条件分岐を行う方法となります。

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

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

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

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

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

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

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

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

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

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

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

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

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