IE6-8 is Not Supported

JavaScript で UserAgent を取得してブラウザを判別する方法

JavaScript を使ったブラウザ判別方法です。
細かくブラウザの判別やサポートしている技術を調べるには Modernizr を使うのが主流だと思いますが、そこまで詳しくしなくても対応できることもあるのでそんなときは直接書くものありかな、と。ちょっと前に IE や Opera の UA が微妙に変わったのでそこに対応する形にしました。

// Your UserAgent
function getUA() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	if      (userAgent.indexOf('opera') != -1 || userAgent.indexOf('opr') != -1) { return 'opera'; }
	else if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) { var array, version; array = /(msie|rv:?)\s?([\d\.]+)/.exec(userAgent); version = (array) ? array[2] : ''; return 'ie ie' + version; }
	else if (userAgent.indexOf('chrome') != -1) { return 'chrome'; }
	else if (userAgent.indexOf('safari') != -1) { return 'safari'; }
	else if (userAgent.indexOf('firefox') != -1) { return 'firefox'; }
	else { return false; }
}
console.log(getUA());

IE は 11 以降msieでの判別ができなくなりtridentに、Opera も Blink 搭載の 15 以降はoperaでの判別からoprへ変更になりました。 IE はバージョンを取得する必要が多いのでこちらの記事を参考にバージョンも取得する記述をしています。

あとはgetUA()を記述した場所に相当のブラウザ名が出力されるので、クラスとして付加し CSS を記述することや専用の処理を記述することで対応が可能だと思います。
今回は PC の主要ブラウザのみ判定しましたが、必要ならば iPhone や iPad の判定も追記してあげると、より細かく対応できそうです。

ads by google