JavaScriptでUserAgentを使った判別をする

ユーザーエージェントを使って、ブラウザの判別とスマホ・タブレットかどうかの判別を行ってみます。

ブラウザの判別

PC向けにどのブラウザで閲覧しているかを判別してみます。

JavaScript

var ua = navigator.userAgent.toLowerCase();
var ver = navigator.appVersion.toLowerCase();

// IE(11以外)
var isMSIE = (ua.indexOf('msie') > -1) && (ua.indexOf('opera') == -1);
// IE6
var isIE6 = isMSIE && (ver.indexOf('msie 6.') > -1);
// IE7
var isIE7 = isMSIE && (ver.indexOf('msie 7.') > -1);
// IE8
var isIE8 = isMSIE && (ver.indexOf('msie 8.') > -1);
// IE9
var isIE9 = isMSIE && (ver.indexOf('msie 9.') > -1);
// IE10
var isIE10 = isMSIE && (ver.indexOf('msie 10.') > -1);
// IE11
var isIE11 = (ua.indexOf('trident/7') > -1);
// IE
var isIE = isMSIE || isIE11;
// Edge
var isEdge = (ua.indexOf('edge') > -1);

// Google Chrome
var isChrome = (ua.indexOf('chrome') > -1) && (ua.indexOf('edge') == -1);
// Firefox
var isFirefox = (ua.indexOf('firefox') > -1);
// Safari
var isSafari = (ua.indexOf('safari') > -1) && (ua.indexOf('chrome') == -1);
// Opera
var isOpera = (ua.indexOf('opera') > -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');
}

if(isChrome) {
	alert('Google Chrome');
}
if(isFirefox) {
	alert('Firefox');
}
if(isSafari) {
	alert('Safari');
}
if(isOpera) {
	alert('Opera');
}

ここの処理だけ別の対応をしたい、という時がたまにあるので、各ブラウザを個別にif文で判定できるようにしています。
ブラウザの判別のデモページ
　

スマホ・タブレットの判別

JavaScript

var ua = navigator.userAgent.toLowerCase();

// iPhone
var isiPhone = (ua.indexOf('iphone') > -1);
// iPad
var isiPad = (ua.indexOf('ipad') > -1);
// Android
var isAndroid = (ua.indexOf('android') > -1) && (ua.indexOf('mobile') > -1);
// Android Tablet
var isAndroidTablet = (ua.indexOf('android') > -1) && (ua.indexOf('mobile') == -1);


// 使用例
if(isiPhone) {
	alert('iPhone');
}
if(isiPad) {
	alert('iPad');
}
if(isAndroid) {
	alert('Android');
}
if(isAndroidTablet) {
	alert('Android Tablet');
}

例外的な端末もあるみたいですが、その辺はとりあえず考慮していないです。
スマホ・タブレットの判別のデモページ
　

【参考サイト】

• userAgent一覧/ユーザーエージェント一覧
• JavaScript とかによるブラウザ判定方法のまとめ – A Memorandum
• javaScriptで対応ブラウザ判定 – Qiita
• JavaScriptでスマホかタブレットかその他かを返す – Qiita
• ブラウザ – Microsoft Edgeのユーザーエージェントがカオスなので注意 – Qiita