userAgent / webBrowser をjQueryを使って判断する

Takaya
|
2019年9月12日
| コメントはまだありません
| JavaScript

コーディングする際、最近は、ブラウザ依存も少なくなってきたんで、ハックなんてしなくても、大体はカバーできちゃうんですが、
ひと昔前（IE6なんかが主流のころ）は、IEハック・FireFoxハック・Safariハックなんかが、それぞれ存在して、まだ、Operaハックなんてものあって、いっぱいっぱいになってました。
CSS3やHTML5が出てきて、便利になったなーと実感してます。

最近、ハックなんて使うことも減少していたんですが、これまた、iPadからのプリントCSSって案件が出てきたので、
ユーザーエージェントでハック的なことをやってしまおうと思ったわけです。

ついでに、よくあるwindow.navigator.userAgentを使って、パソコン＆タブレット＆スマホを判断し、
それに、よくあるwindow.navigator.appVersionを組み合わせて、ブラウザバージョンまでをカバーするようなコードを作っておきました。

☆実際のサイトがコレ
http://www2.panasonic.biz/ls/air/pac/navi/※アクセス数を上げる課題もあるので、ページを一度でも踏んでいただけるとありがたいです。エアコン選定ソフト（RAC NAVI）

まずは、<head>内にjQueryを記述してくださいね。
※サイトでは、Ver 1.11.1を使ってますが、Ver2系/Ver3系でも動くと思います。（試してないですが）

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

次に、外部ファイルでもいいので、以下のソースを記述。
▼JavaScript

$(document).ready(function () {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	
	if (userAgent.indexOf('msie') != -1) {
		$("body").addClass("ie");
		if (appVersion.indexOf('msie 6.') != -1) {
			$('body').attr('id', 'ie6');
		} else if (appVersion.indexOf('msie 7.') != -1) {
			$('body').attr('id', 'ie7');
		} else if (appVersion.indexOf('msie 8.') != -1) {
			$('body').attr('id', 'ie8');
		} else if (appVersion.indexOf('msie 9.') != -1) {
			$('body').attr('id', 'ie9');
		} else if (appVersion.indexOf('msie 10.') != -1) {
			$('body').attr('id', 'ie10');
		}
	} else if (userAgent.indexOf('trident/7') != -1) {
		$('body').attr('id', 'ie11');
	} else if (userAgent.indexOf('chrome') != -1) {
		$('body').attr('id', 'chrome');
	} else if (userAgent.indexOf('iphone') != -1) {
		$('body').attr('id', 'tablet');
	} else if (userAgent.indexOf('ipad') != -1) {
		$('body').attr('id', 'tablet');
	} else if (userAgent.indexOf('ipod') != -1) {
		$('body').attr('id', 'tablet');
	} else if (userAgent.indexOf('safari') != -1) {
		$('body').attr('id', 'safari');
	} else if (userAgent.indexOf('gecko') != -1) {
		$('body').attr('id', 'firefox');
	} else if (userAgent.indexOf('opera') != -1) {
		$('body').attr('id', 'opera');
	} else if (userAgent.indexOf('android') != -1) {
		$('body').attr('id', 'tablet');
	} else if (userAgent.indexOf('mobile') != -1) {
		$('body').attr('id', 'tablet');
	}
});

ちょっと前までは、会社で上司と「jQuery か prototype のどっちでいきましょう？」「共存ってどうやるんでしたっけ？」みたいな会話をしてたのになぁ。。。時代は変わりましたね。

デモサイトは、こちら

JavaScript