JavaScript でUserAgent を用いた端末判別

JavaScript でUserAgent を用いた端末判別

UserAgentを使ったモバイル、タブレット、PC を判別するものです。

なお、MDNでは、UserAgent は読み書きできるので、UserAgent による端末識別は推奨されてないようです。

developer.mozilla.org

サンプル

PCでアクセスすれば「PC」と、タブレットでアクセスすれば「Tablet」と、 モバイルでアクセスすれば「Mobile」と表示され、iPhone かAndroid であるかも判別します。

cartman0.github.io

コード

UserAgent を用いて端末判別

コード解説

重要な部分は以下です。

        

var _ua = (function(u){
 var mobile = {
  0: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
    || u.indexOf("iphone") != -1
    || u.indexOf("ipod") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
    || u.indexOf("blackberry") != -1,
  iPhone: (u.indexOf("iphone") != -1),
  Android: (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
 };
 var tablet = (u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
            || u.indexOf("ipad") != -1
            || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
            || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
            || u.indexOf("kindle") != -1
            || u.indexOf("silk") != -1
            || u.indexOf("playbook") != -1;
 var pc = !mobile[0] && !tablet;
  return {
   Mobile: mobile,
   Tablet: tablet,
   PC: pc
  };
 })(window.navigator.userAgent.toLowerCase());

こちらを参照しました。

w3g.jp

_ua.PC === true であればPC, _ua.Tablet ===true であればタブレット、 _ua.Mobile[0] === true でモバイル端末と判定できます。

さらに、Mobile は、_ua.Mobile.iPhone === true でiPhone, _ua.Mobile.Android === true でAndroid端末を判別できます。

参考リンク

• window.navigator.userAgent - Web API インターフェイス | MDN

• 2015年版JavaScriptユーザエージェント判別・判定