WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

ブラウザ判定

デモ
http://efu.sakura.ne.jp/web/useragent/

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ブラウザ判定</title>
	<style>
		.text {
			font-size: 32px;
			text-align: center;
			margin: 50px 0;
		}
	</style>
</head>
<body>
	<p class="text">お使いのブラウザは<span></span>です。</p>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script>
		var userAgent = window.navigator.userAgent.toLowerCase();
		var appVersion = window.navigator.appVersion.toLowerCase();
		var _html = '';
		if( userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/) ) {
			//IE11を含むIE判定
			_html += 'Internet Explorer';
			if (appVersion.indexOf("msie 6.") != -1) {
				//IE6
				_html += '6';
			} else if (appVersion.indexOf("msie 7.") != -1) {
				//IE7
				_html += '7';
			} else if (appVersion.indexOf("msie 8.") != -1) {
				//IE8
				_html += '8';
			} else if (appVersion.indexOf("msie 9.") != -1) {
				//IE9
				_html += '9';
			} else if (appVersion.indexOf("msie 10.") != -1) {
				//IE10
				_html += '10';
			}
		} else if (userAgent.indexOf('chrome') != -1) {
			//Google Chrome
			_html += 'Google Chrome';
		} else if (userAgent.indexOf('firefox') != -1) {
			//FireFox
			_html += 'FireFox';
		} else if (userAgent.indexOf('safari') != -1) {
			//Safari
			_html += 'Safari';
		} else if (userAgent.indexOf('opera') != -1) {
			//Opera
			_html += 'Opera';
		} else {
			_html += '不明';
		}
		$(function(){
			$('.text span').append(_html);
		});
	</script>
</body>
</html>

関連記事
mmmmofu.hatenablog.com