JavaScriptで特定のOSやブラウザの判定を行う方法

JavaScriptを使っていて、特定の端末やOSの場合になにか処理を実行したいときがあります。
今回はそんなときに使える判定方法についてまとめておきます。

ユーザーエージェントで判定

まずはユーザーエージェントで判定する方法です。
この方法だと特定のデバイスの場合に確実に発火しますが、その代わりにPCでブラウザ幅を狭めた場合などには発火してくれません。

OS判定

ユーザーエージェントはwindow.navigator.userAgentで取得ができる利用者の情報です。
ちなみに、大文字小文字があるとややこしいのでtoLowerCase()を使ってすべて小文字にするのが一般的です。

let ua = window.navigator.userAgent.toLowerCase();
if(ua.indexof("OS判定名") !== -1){
  // 特定OSの場合の処理
}

OS判定をするための判定名は下記の通りです。

ブラウザ判定

OS判定と全く同じ処理で、indexOfの中身をブラウザ用の名前に変えるだけで、ブラウザ判定は可能です。

let ua = window.navigator.userAgent.toLowerCase();
if(ua.indexof("ブラウザ判定名") !== -1){
  // 特定ブラウザの場合の処理
}

ブラウザ判定をするための判定名は下記の通りです。

デバイスの横幅で判定

もしPCでブラウザ幅を狭めても発火してほしい場合は、デバイス幅で判定するようにします。

ちなみに、下記コード内で使っているwindow.matchMediaを使うとメディアクエリと同じように条件が指定できます。

// デバイス幅が640px以下の場合に処理する
if (window.matchMedia('(max-device-width: 640px)').matches) {
  // 640px以下の処理
} else {
  // 641px以上の処理
}

処理によってはOSに依存するよりも、横幅がどれだけの大きさかによって処理を分けたい場合もあるので、この方法だとOS関係なく発火できます。

使い分け方法

解析系や裏側の処理など、デバイス情報と紐付いて処理をする場合はユーザーエージェントから判定しないと、PCで横幅を狭めている場合にも発火してしまいます。

それに対して、表示系など見た目に関連する処理はデバイスの横幅から判定しないと、PCで横幅を狭めた場合に処理されずに表示崩れなどの原因になってしまいます。

状況に応じて、適した方を使用するようにしましょう。