<p>* 크롬이면 배경이 노란색이 됩니다. *</p>
<h1>userAgent : <span></span></h1>
<hr>
<ul>
	<li>isChrome : <span></span></li>
	<li>isChromeMobile : <span></span></li>
	<li>isSamsungBrowser : <span></span></li>
	<li>isWindows : <span></span></li>
	<li>isEdge : <span></span></li>
	<li>isIE : <span></span></li>
</ul>
h1, h2, li
	margin-top: 4px
	padding: 4px 8px
	font-size: 20px

	span
		font-weight: 700

h1 
	font-size:  16px

p
	margin: 20px 0
	font-size: 20px
	font-weight: 700
	text-align: center
// includes는 IE에서 동작하지 않아서 indexOf를 사용
var userAgent = window.navigator.userAgent;
var isChrome = userAgent.indexOf('Chrome');
var isChromeMobile = userAgent.indexOf('CriOS');
var isSamsungBrowser = userAgent.indexOf('SamsungBrowser');
var isWindows = userAgent.indexOf('Windows NT');
var isEdge = userAgent.indexOf('Edge');
var isIE = userAgent.indexOf('Trident');

// 크롬 브라우저 체크
if(isChrome > -1 || isChromeMobile > -1){
	if(isSamsungBrowser < 0 && isEdge < 0){
		$('body').css('background', 'yellow');
	}
}

// for demo page
var checkList = [userAgent, isChrome, isChromeMobile, isSamsungBrowser, isWindows, isEdge, isIE];

$('h1 span').text(checkList[0]);

checkList.forEach(function(item, index) {	
  if(item > -1){
		item = true;
		$('li:nth-child('+index+') span').text(item);
		$('li:nth-child('+index+')').css({'background': '#193491', 'color': '#fff'});
	}
	else {
		item = false;
		$('li:nth-child('+index+') span').text(item);
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js