JavaScriptでデバイス判定してPC／スマートフォンサイトへリダイレクト

スマートフォン専用のサイトを構築した際に、PCでスマートフォンサイトを閲覧してほしくない、逆に、スマートフォンでPCサイトを閲覧をしてほしくないといった要件は少なくありません。

Webページにアクセスしてきた端末情報を判定し、リダイレクトさせてしまえばいいのですが、その手法でも「.htaccess」を使ったり、javascriptやPHPを使ったりといくつか方法があります。

今回はjavascriptを使った方法を紹介します。

javascriptでは「navigator.userAgent」を使ってクライアント端末の情報を取得することができます。
例えば、Windowsでアクセスした場合は以下の情報が取得できます。

Mozilla/5.0 (Windows; U; Windows NT 6.1; ja; rv:1.9.2.13)
Gecko/20101203 Firefox/3.6.13 (.NET CLR 3.5.30729)

Android端末からアクセスすると以下の情報が取得できます。

Mozilla/5.0 (Linux; U; Android 2.2; ja-jp; HTCX06HT Build/FTF91)
AppleWebKit/533.1(KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

この中から端末の情報を抜き出して、スマートフォンからのアクセスと判定すれば、スマートフォンサイトへリダイレクトさせてあげればいいわけです。
例えば、Android、iPhone、iPadを判定したい場合は以下のようになります。

var agent = navigator.userAgent;
if(agent.indexOf('Linux; U; Android ') != -1 ||
		agent.indexOf('iPhone; U') != -1 ||
		agent.indexOf('iPad; U') != -1){
	location.href = '/smartphone/';
}

逆に、PCからのアクセスでスマートフォンサイトを見せないようにするためには、

var agent = navigator.userAgent;
if(agent.indexOf('Linux; U; Android ') == -1 &&
		agent.indexOf('iPhone; U') == -1 &&
		agent.indexOf('iPad; U') == -1){
	location.href = '/';
}

になるのかな。「ドモルガンの法則」でしたっけ。

ただ、javascriptの処理なので、クライアント端末に依存することには注意しなければなりません。