WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

OS判定

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

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

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

OS入力する判定名備考
macOSmac os x半角スペースに注意
Windowswindows nt 
iPhoneiphone 
Androidandroid 

ブラウザ判定

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

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

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

ブラウザ入力する判定名
Google Chromechrome
Firefoxfirefox
Safarisafari
Edgeedge
Internet Explorerie
Operaopera

デバイスの横幅で判定

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

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

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

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

使い分け方法

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね