2014年5月18日日曜日

JavascriptでUser AgentによってスマートフォンとPCに処理を振り分ける方法

2014年5月18日日曜日 , ,
Androidなどのスマートフォンでアクセスした場合はスマートフォン向けの処理へ、PCでアクセスした場合はPC向けの処理へ振り分けられるようにする方法です。

Javascriptを使って、navigator.userAgentからUser Agentを取得し、indexOf()を使って判別しています。iPhone、iPod、Android、Windows Phone、BlackBerry対応です。
ではサンプルコードです。
<script type='text/javascript'>
<!--
  var ua = navigator.userAgent;
  
  if((ua.indexOf('iPhone')     > 0 && ua.indexOf('iPad') == -1) ||
     (ua.indexOf('Windows')    > 0 && ua.indexOf('Phone')  > 0) ||
      ua.indexOf('iPod')       > 0 ||
      ua.indexOf('Android')    > 0 ||
      ua.indexOf('BlackBerry') > 0){
    //
    // スマートフォンのための処理を記述
    //
  }else{
    //
    // PCのための処理を記述 
    //
  }
//-->
</script>

もしスマートフォンからのアクセスを、スマートフォン向けのアドレスに振り分けるなら下記のようにします。
<script type='text/javascript'>
<!--
  var ua = navigator.userAgent;
  
  if((ua.indexOf('iPhone')     > 0 && ua.indexOf('iPad') == -1) ||
     (ua.indexOf('Windows')    > 0 && ua.indexOf('Phone')  > 0) ||
      ua.indexOf('iPod')       > 0 ||
      ua.indexOf('Android')    > 0 ||
      ua.indexOf('BlackBerry') > 0){
    location.href = '/mobile/';
  }
//-->
</script>

スマートフォンは、/mobile/へアドレスが飛ぶようになります。
簡単ですね。

0 件のコメント:

コメントを投稿