JavaScript とかによるブラウザ判定方法のまとめ

JavaScript でのブラウザ判定についてまとまった情報がサクッとヒットしないので、まとめ

UserAgent によるブラウザ判定

よくある単純な例

var userAgent = window.navigator.userAgent.toLowerCase();

if (userAgent.indexOf('opera') != -1) {
  return 'opera';
} else if (userAgent.indexOf('msie') != -1) {
  return 'ie';
} else if (userAgent.indexOf('chrome') != -1) {
  return 'chrome';
} else if (userAgent.indexOf('safari') != -1) {
  return 'safari';
} else if (userAgent.indexOf('gecko') != -1) {
  return 'gecko';
} else {
  return false;
}

IE のバージョンまで知りたい場合は、appVersion 見ときますか。

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();

if (userAgent.indexOf('opera') != -1) {
  return 'opera';
} else if (userAgent.indexOf("msie") != -1) {
  if (appVersion.indexOf("msie 6.") != -1) {
    return 'ie6';
  } else if (appVersion.indexOf("msie 7.") != -1) {
    return 'ie7';
  } else if (appVersion.indexOf("msie 8.") != -1) {
    return 'ie8';
  } else if (appVersion.indexOf("msie 9.") != -1) {
    return 'ie9';
  } else {
    return 'ie';
  }
} else if (userAgent.indexOf('chrome') != -1) {
・・・

UserAgent によるブラウザ判定の注意点

たまに IE8 なのに IE6 と誤認識されるケースとして、こんな UserAgent があったりします。

Mozilla/4.0 (compatible; MSIE 8.0; 略 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)略

この時、以下のように userAgent の判別入れていると、「compatible; MSIE 6.0」にマッチして誤認識されます。

if (userAgent.indexOf('msie 6') != -1) {
  return 'msie 6';
}

何かの都合でレジストリに
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform
の値に Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) などの文字列値が入ってしまうと、上記の UserAgent になってしまうようです。

JQuery でのブラウザ判定(非推奨)

JQuery 1.3 から非推奨になっていますが、簡易用途には使いやすいです。

if(jQuery.browser.msie){
  return 'msie';
}else if(jQuery.browser.mozilla){
  return 'firefox';
}else if(jQuery.browser.webkit){
  return 'chrome/safari';
}else if(jQuery.browser.opera){
  return 'opera';
}

IE のバージョンまで見たければ、

if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 8){
  return 'msie8';
}else if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 7){
  return 'msie7';
}else if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
  return 'msie6';
}

jQuery.browser とかで判断しないで、ブラウザのサポート機能で判断せい。ということで jQuery.support の利用が推奨されています。詳細は本家を参照。
この辺で考察されています。

ブラウザのサポート機能で判断

レガシーブラウザの判定は単に以下の判定で可能です。

if (typeof document.documentElement.style.maxHeight != "undefined") {
  // IE 7.0 以上 その他モダンブラウザ
} else {
  // IE 6.0 以下
}

この辺が詳しいです。

IEのバージョンも見たい場合は、以下の感じ。

if (typeof document.documentElement.style.maxHeight != "undefined") {
    if (!/*@cc_on!@*/false){
        // IE 以外
    }else if (document.documentMode >=8) {
        // IE8 以降
    }else {
        //IE7, IE8（IE7 mode)
    }
} else {
  // IE 6.0 以下
}

こんな判定も

IE のバージョン判定は Conditional Comments を使って

var ie = (function(){
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );
    return v > 4 ? v : undef;
}());

としておいて、ie の中身にバージョン番号が入るので判定するなんてのも。
Conditional Comments についてはここ

ライブラリで

多々ありますが、

とか？

おまけでUserAgentネタ

IE で UserAgent 見るには、[アドレス] バーに次のコマンドを入力。

javascript:alert(navigator.userAgent)

chrome で UserAgent 偽装するにはコマンドライン引数に --user-agent= として指定

・・chrome.exe" --user-agent="Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;・・"