JavaScriptでUA判別してスマホとタブレットを振り分ける方法

JavaScriptを使用してUAでiPhoneやAndroidのスマホを判定したり、増加傾向にあるタブレットを判別する方法メモ。
UAの法則性を覚えておけば、ある程度アクセスを判別して振り分けられるので重宝します。
今回はJavascriptに絞っていろいろな判別をしてみたいと思います。

JavascriptでUA判別してリダイレクト

<script type="text/javascript">
	var ua = navigator.userAgent;
	if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) {
		location.href = './sp/';
	}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
		location.href = './tab/';
	}
</script>

まずはuaにアクセス端末のユーザーエージェントを格納します。
そして条件分岐で文字列に「iPhoneが含まれる場合」「iPodが含まれる場合」「AndroidとMobileが同時に含まれる場合」「Windows Phoneが含まれる場合」は/sp/というURLにリダイレクトします。
それ以外で文字列に「iPadが含まれる場合」「Androidのみ含まれる場合」は/tab/というURLにリダイレクトします。
これに当てはまらないUAだった場合にはリダイレクトは行われません。

という記述です。

Androidに限ってはMobileという文字列が含まれるものがスマホになっているので、単純にAndroidだけで判別しているとスマホとタブレットで当てはまってしまうので注意が必要ですね。
Apple製品ではiPhoneとiPodとiPadという明確な振り分けができます。

JavascriptでCSSを振り分ける

<script type="text/javascript">
	var ua = navigator.userAgent;
	if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) {
		document.write('<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./css/mobile.css&quot;>');
	}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
		document.write('<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./css/tab.css&quot;>');
	}else{
		document.write('<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./css/pc.css&quot;>');
	}
</script>

前項同様の処理でCSSを呼び出す記述を振り分けている記述です。
用意するのは「mobile.css」「tab.css」「pc.css」になっていますがこの辺はお好みで変更できますね。

注意したいのはいつの時代にも生み出される例外端末です。
AndroidでもUAの法則性がおかしな端末やWindows Phoneの世代によって様々な問題があるようです。

そこまで厳格に振り分ける必要がある人はいないと思いますが、
もしも必要ならばJavascriptではなくPHPを利用した
「Mobile Detect – lightweight PHP class for detecting mobile devices (including tablets)」
などを使うことをおすすめします。

ちなみにどうしてもJavascriptで実現させたい時には
「hgoebl/mobile-detect.js · GitHub」
Mobile DetectのJS版があります。