ブラウザや端末の判定

javascriptでブラウザや端末(PCなのかモバイルなのか等)を判定する方法をまとめました。

判定方法の種類

今のところ、下記の手段が主流かなと思っています。

  • UserAgent
     以前は(というか今でも)この方法が主流でしたが、
     ChromeでUserAgent廃止の動きが(数年前から)あるなど、
     別の手段に移り変わろうという動きもあります。
  • User-Agent Client Hints
     Chrome(Google)が代替の手段として検討しているものですが
     mozillaでは色々懸念していてまだサポートされていないなど
     普及率としてはいまいちです。
  • platform.js/UAParser.js
     GitHubで公開されているライブラリで、難しいことをしなくていいなら
     これで事足りることも多そうです。

さっそくサンプルを見てみましょう。

サンプル(UserAgentUser-Agent Client Hints

※端末を持っていないものも多いので推測で自作している部分もあります。
 参考程度にご利用ください。

サンプル(platform.js/UAParser.js

platform.jsはここからダウンロードする必要があります。
GitのインストールやGitHubへの登録が済んでいない場合は、ここを参考にして下さい。

コンソールで任意のフォルダに移動し、下記コマンドを実行して下さい。

git clone https://github.com/bestiejs/platform.js.git

ダウンロード後、フォルダ内の『platform.js』をHTMLから参照できるようにして下さい。

<script src="./js/platform.js/platform.js" defer></script>

UAParser.jsはCDNから取得できるようなので、CDNのURLから参照できるようにするだけです。

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js" defer></script>

さっそく使ってみましょう。