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

ここでは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）分岐する処理はたまに使うのでどこかにメモしておいてコピペで使えると便利ですね。

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