以前ここで「jQuery(JavaScript)でiPhone、iPad、Androidなどデバイスを判別して
URLをリダイレクトする方法」と題して、
それぞれのデバイスごとに振り分ける方法を紹介しましたが
Androidはモバイルとタブレットの振り分けはできていなかったのですが
iPhoneとAndroidモバイル、iPadとAndroidタブレットのそれぞれを振り分ける状況が
やはり増えてきそうなので追加版として紹介してみます。
Androidでモバイルとタブレット(+iPhone/iPad)を振り分ける方法
サンプルとしては、AndroidタブレットとiPadは「/tb/」ディレクトリへ
AndroidモバイルとiPhoneは「/sp/」ディレクトリへ、リダイレクト処理をする構成にしてみます。
◆SCRIPT <script type="text/javascript"> var userAgent = window.navigator.userAgent.toLowerCase(); if((userAgent.indexOf('Android') > 0 && userAgent.indexOf('Mobile') == -1) || userAgent.indexOf('iPad') > 0){ location.href = '/tb/'; } else if ((userAgent.indexOf('iPhone') > 0 && userAgent.indexOf('iPad') == -1) || userAgent.indexOf('iPod') > 0 || (userAgent.indexOf('Android') > 0 && userAgent.indexOf('Mobile') > 0)){ location.href = '/sp/'; } </script>
AndroidではモバイルにはUserAgentに「Mobile」という値が付くので
それが付いているか、付いていないかを見てタブレットと判別しています。
この形でiPhoneとAndroidモバイル、iPadとAndroidタブレットの
それぞれを振り分けることができるはずなのですが
厄介なことにAndroidタブレットの中には機種によって
タブレットなのにUserAgentに「Mobile」が付くものがあるようで
それらを厳密に分ける場合以下の様になります。
◆SCRIPT <script type="text/javascript"> var userAgent = window.navigator.userAgent.toLowerCase(); if((userAgent.indexOf('Android') > 0 && userAgent.indexOf('Mobile') == -1) || userAgent.indexOf('A1_07') > 0 || userAgent.indexOf('SC-01C') > 0 || userAgent.indexOf('iPad') > 0){ location.href = '/tb/'; } else if ((userAgent.indexOf('iPhone') > 0 && userAgent.indexOf('iPad') == -1) || userAgent.indexOf('iPod') > 0 || (userAgent.indexOf('Android') > 0 && userAgent.indexOf('Mobile') > 0)){ location.href = '/sp/'; } </script>
今のところ自分の知っている範囲ではAndroidタブレットの
——————————–
・A1_07
・SC-01C
——————————–
の2機種がタブレットにも関わらず
UserAgentに「Mobile」が付く端末のようなので
その2つはきちんとタブレットとして認識させます。
(2013/2/13現在)
最後についでに、タブレットとスマホに加えて
IE6/7/8のそれぞれのバージョンで判別処理をするサンプルをメモ。
◆SCRIPT <script type="text/javascript"> var userAgent = window.navigator.userAgent.toLowerCase(), appVersion = window.navigator.appVersion.toLowerCase(); if((userAgent.indexOf('Android') > 0 && userAgent.indexOf('Mobile') == -1) || userAgent.indexOf('A1_07') > 0 || userAgent.indexOf('SC-01C') > 0 || userAgent.indexOf('iPad') > 0){ location.href = '/tb/'; } else if ((userAgent.indexOf('iPhone') > 0 && userAgent.indexOf('iPad') == -1) || userAgent.indexOf('iPod') > 0 || (userAgent.indexOf('Android') > 0 && userAgent.indexOf('Mobile') > 0)){ location.href = '/sp/'; } else if(userAgent.indexOf("msie") != -1){ if(appVersion.indexOf("msie 6.") != -1) { location.href = '/ie6/'; } else if(appVersion.indexOf("msie 7.") != -1) { location.href = '/ie7/'; } else if(appVersion.indexOf("msie 8.") != -1) { location.href = '/ie8/'; } } </script>
タブレットは「/tb/」
スマホは「/sp/」
IE6は「/ie6/」
IE7は「/ie7/」
IE8は「/ie8/」
にそれぞれにリダイレクト処理をする場合この様な形になります。
この様な方法でさまざまなデバイスによって判別させることで
リダイレクト処理だけでなく様々な処理を加えることができるかと思います。
ご参考までに。。。