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;・・"