パソコン、スマホ（スマートフォン）、タブレットのユーザーエージェント判定

パソコン、スマートフォン、タブレットで使用するOS、ブラウザ、バージョンなどを判定して分岐処理をする記述を書いてみた。Windows,Mac,Android,iPhone,iPadなど自分が必要な範囲で分岐。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSハックを使用しないOSとバージョンの判定</title>
<!--&#91;if lt IE 7&#93;><html class="nojs ie ie6" lang="ja"><!&#91;endif&#93;-->
<!--&#91;if IE 7&#93;><html class="nojs ie ie7" lang="ja"><!&#91;endif&#93;-->
<!--&#91;if IE 8&#93;><html class="nojs ie ie8" lang="ja"><!&#91;endif&#93;-->
<!--&#91;if IE 9&#93;><html class="nojs ie ie9" lang="ja"><!&#91;endif&#93;-->
<!--&#91;if (gt IE 9)|!(IE)&#93;><!----><html class="nojs" lang="ja"><!--&#91;endif&#93;-->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
	var ua = navigator.userAgent.toLowerCase();
	var isWindows = /windows/.test(ua);
	var isMac = /mac/.test(ua);
	var isIPhone = /i(phone|pod)/.test(ua);
	var isIPad = /ipad/.test(ua);
	var isIOS = isIPhone || isIPad;
	var isAndroid = /android/.test(ua);
	var isAndroidMobile = /android(.+)?mobile/.test(ua);
	var isIE = /msie|trident/.test(ua);
	var isFirefox = /firefox/.test(ua);
	var isChrome = /chrome/.test(ua);
	var isCrios = /crios/.test(ua);
	var isSafari = /safari/.test(ua);
	var isOpera = /opera/.test(ua);
	var isOperaMobile = /opera mobi/.test(ua);
	var isOperaMini = /opera mini/.test(ua);
	var isTablet = isIPad || (isAndroid && !isAndroidMobile && !isOperaMobile);
	var isSmartphone = isIPhone || isAndroidMobile;
	var isPC = !isIOS && !isAndroid;

	$("html").removeClass("nojs");

	if(isPC){
		$("html").addClass("pc");
	}
	else if(isTablet){
		$("html").addClass("tablet");
	}
	else if(isSmartphone){
		$("html").addClass("phone");
	}

	$("body").append(ua + "<br>");

	if(isIPhone){
		$("body").append("isPhone" + "<br>");
	}
	if(isIPad){
		$("body").append("isIPad" + "<br>");
	}
	if(isIOS){
		$("body").append("isIOS" + "<br>");
	}
	if(isAndroidMobile){
		$("body").append("isAndroidMobile" + "<br>");
	}
	if(isAndroid && !isAndroidMobile){
		$("body").append("isAndroid" + "<br>");
	}
	if(isTablet){
		$("body").append("isTablet" + "<br>");
	}
	if(isSmartphone){
		$("body").append("isSmartphone" + "<br>");
	}
	if(isPC){
		$("body").append("isPC" + "<br>");
	}
	if(isWindows){
		$("body").append("isWindows" + "<br>");
	}
	if(isMac && !isTablet && !isSmartphone){
		$("body").append("isMac" + "<br>");
	}
	if(isIE){
		$("body").append("isIE" + "<br>");
	}
	if(isFirefox){
		$("body").append("isFirefox" + "<br>");
	}
	if(isChrome || isCrios){
		$("body").append("isChrome" + "<br>");
	}
	if(isOpera && !isOperaMobile && !isOperaMini){
		$("body").append("isOpera" + "<br>");
	}
	if(isOperaMobile){
		$("body").append("isOperaMobile" + "<br>");
	}
	if(isOperaMini){
		$("body").append("isOperaMini" + "<br>");
	}
	if(isSafari && !isChrome && !isCrios){
		$("body").append("isSafari" + "<br>");
	}
});
</script>
</body>
</html>

パソコン、スマホ（スマートフォン）・タブレットのユーザーエージェント判定
https://iwb.jp/s/jsua/

関連した記事