JavaScriptでスマートフォンとタブレットを判別

JavaScriptでユーザーが使用しているブラウザ（端末）の種類（PCか、あるいはスマートフォンやタブレットか）を判別してみます。

JavaScriptからブラウザ情報を取得

JavaScriptからブラウザ情報を取得するには、window.navigator.userAgentプロパティを参照します。ブラウザのアドレス欄に、以下の文字列を入力してみましょう。

javascript:alert(navigator.userAgent);

使用しているブラウザのUserAgentが表示されたと思います。このuserAgentには、端末やOS、ブラウザの情報が格納されているので、分析するとOSや端末の種類を判別することが可能です。

JavaScriptでスマートフォン端末を判別

まず、userAgentからiPhone/Android端末を判別してみましょう。iPhoneならuserAgentに「iPhone」という文字列が、AndroidならuserAgentに「Android」という文字列が含まれるので、これらの文字列が含まれるか調べます。

if (navigator.userAgent.indexOf('iPhone') != -1) {
    alert('iPhoneでアクセス');
}

if (navigator.userAgent.indexOf('Android') != -1) {
    alert('Androidでアクセス');
}

実行してみる
iPhone/Android端末ならメッセージを表示します

また、Androidの標準ブラウザはスマートフォン端末だとuserAgentに「Mobile」という文字が含まれているので、「userAgentにAndroidとMobileの文字列が含まれている」ならAndroidスマートフォンの可能性が高くなります。

以上では、JavaScriptからスマートフォン（iPhone/Androidスマートフォン）を判別できるようになりました。

JavaScriptでタブレット端末を判別

次にタブレット（iPad/Androidタブレット）端末を判別してみます。

Androidなら「userAgentにAndroidが含まれ、かつMobileが含まれていない」場合にはAndroidタブレットとして判別すればよいでしょう。また、iPadの場合はuserAgentに「iPad」の文字列が含まれているので、それで判別できます。

以上のことをまとめて「iOS/Androidのスマートフォンとタブレット端末（いずれも標準ブラウザでのアクセスを想定）であるか判別する」関数を作ってみました。

function ua_test() {

	var os = '不明';
	var device = '不明';

	if (navigator.userAgent.indexOf('iPhone') != -1) {

		os = 'iOS';
		device = 'スマートフォン';

	}

	if (navigator.userAgent.indexOf('iPad') != -1) {

		os = 'iOS';
		device = 'タブレット';

	}

	if (navigator.userAgent.indexOf('Android') != -1) {

		os = 'Android';

		if (navigator.userAgent.indexOf('Mobile') != -1) {
			device = 'スマートフォン';
		} else {
			device = 'タブレット';
		}

	}

	return {"os":os, "device":device};

}

実行してみる

ただし、userAgentはユーザーが設定（他の端末／ブラウザに偽装）できるので、厳密な判別には使えません。「スマートフォンでないと閲覧できないページ」を実現するような場合は、他の方法を検討してください。PCのブラウザを使えば、userAgentを偽装してiPhone/Androidスマートフォンであるかのように装ってアクセスできるからです。

userAgentによる閲覧環境の振り分けは、あくまでもユーザーの閲覧環境に応じて見やすいページにする、といった利便性向上の手段として使うのが現実的でしょう。