Home
JavaScript
JSでユーザが使っているブラウザを判定する方法【userAgent】

JSでユーザが使っているブラウザを判定する方法【userAgent】

公開日
2022.02.19
更新日
2022.04.02
JSでユーザが使っているブラウザを判定する方法【userAgent】

どうも!かけちまるです!

JavaScriptのNavigator.userAgentでユーザのブラウザやデバイスを判定する方法をご紹介します。
ブラウザによって表示を変えたい時などに使えそうですね。

この記事では、

  • ・ブラウザを判定するソース
  • ・デバイスを判定するソース
  • ・IEのバージョンを判定するソース

がわかります。

ブラウザを判定するソース

ここではwindow.navigator.userAgent.toLowerCase()でユーザーが使用しているブラウザの情報を取得します。

それを元にif文で判定します。
判定方法にはindexOf()メソッドを使用しています。

indexOf()メソッドは指定した文字列が対象の文字列内になければ-1を返す性質があるのでそれを利用して判定しています。

JavaScript
コピー
let userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) { alert('Internet Explorer'); }else if(userAgent.indexOf('edge') != -1 || userAgent.indexOf('edg') != -1) { alert('Edge'); }else if(userAgent.indexOf('chrome') != -1) { alert('Google Chrome'); }else if(userAgent.indexOf('safari') != -1) { alert('Safari'); }else if(userAgent.indexOf('firefox') != -1) { alert('FireFox'); }else if(userAgent.indexOf('opera') != -1) { alert('Opera'); }

実装デモ

ボタンを押すとブラウザを判定します。

ブラウザを判定

デバイスを判定するソース

ここではwindow.navigator.userAgent.toLowerCase()でユーザーが使用しているブラウザの情報を取得します。

それを元にif文で判定します。
判定方法にはindexOf()メソッドを使用しています。

indexOf()メソッドは指定した文字列が対象の文字列内になければ-1を返す性質があるのでそれを利用して判定しています。

JavaScript
コピー
let userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('iphone') != -1) { alert('iPhone'); } if(userAgent.indexOf('ipad') != -1) { alert('iPad'); } if(userAgent.indexOf('android') != -1 && userAgent.indexOf('mobile') != -1) { alert('Android'); } if(userAgent.indexOf('android') != -1 && userAgent.indexOf('mobile') == -1) { alert('Android Tablet'); }

実装デモ

ボタンを押すとデバイスを判定します。

デバイスを判定

IEのバージョンを判定するソース

2022年6月15日にInternet Explorerのサポートは終了してしまうので使いどころはなくなってしまいますが、IEのバージョンを判定して処理を分岐する方法もあります。

JavaScript
コピー
let userAgent = window.navigator.userAgent.toLowerCase(); let appVersion = window.navigator.appVersion.toLowerCase(); // IE(11以外) let isMSIE = (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1); // IE6 let isIE6 = isMSIE && (appVersion.indexOf('msie 6.') != -1); // IE7 let isIE7 = isMSIE && (appVersion.indexOf('msie 7.') != -1); // IE8 let isIE8 = isMSIE && (appVersion.indexOf('msie 8.') != -1); // IE9 let isIE9 = isMSIE && (appVersion.indexOf('msie 9.') != -1); // IE10 let isIE10 = isMSIE && (appVersion.indexOf('msie 10.') != -1); // IE11 let isIE11 = (userAgent.indexOf('trident/7') != -1); // IE let isIE = isMSIE || isIE11; // Edge let isEdge = (userAgent.indexOf('edge') != -1); if(isIE) { alert('IE'); } if(isIE6) { alert('IE6'); } if(isIE7) { alert('IE7'); } if(isIE8) { alert('IE8'); } if(isIE9) { alert('IE9'); } if(isIE10) { alert('IE10'); } if(isIE11) { alert('IE11'); } if(isEdge) { alert('Edge'); }

実装デモ

ボタンを押すとIEのバージョンを判定します。

IEのバージョンを判定

まとめ

ブラウザによって(特にIE)分岐する処理はたまに使うのでどこかにメモしておいてコピペで使えると便利ですね。

また、Navigator.userAgentで取得できる値はブラウザのバージョンアップなどの際に変わってしまうことがあるそうなので記事のソースで動かないことがあればご一報いただけると助かります。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【CSSのみ】背景のグラデーションを変化させるアニメーション

【CSSのみ】背景のグラデーションを変化させるアニメーション

【公式あり】jQueryでスクロール量に連動してアニメーションを実装する

【公式あり】jQueryでスクロール量に連動してアニメーションを実装する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Google Maps API】Googleマップ埋め込みのピンを変更する

【Google Maps API】Googleマップ埋め込みのピンを変更する

jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法