読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

JavaScript でUserAgent を用いた端末判別

HTML5 JavaScript

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端末を判別できます。