[자바스크립트][펌] 브라우저 구별(구분)

출처 : http://blog.naver.com/birdparang/220097620268

자바스크립트에서 브라우저 구분을 위해서는 대개 navigator 개체의 userAgent 속성을 이용한다.

 

var a = navigator.userAgent;

 

if (a.indexOf('MSIE') >=0)

{

// IE는 userAgent에 'MSIE'가 포함되어 있다.

}

 

또는 IE 브라우저 구별을 위한 아래와 같은 매우 간단한 방법도 있다.

 

if  (/*@cc_on!@*/false)

{

// IE면 true, IE가 아니면 false

}

 

그러나 위 두 코드는 IE10까지만 작동한다. IE11부터는 userAgent에 'MSIE'를 사용하지도 않고 더 이상 조건부 컴파일(@cc_on)을 지원하지 않는다.

따라서 아래의 코드로 바꿔야 한다.

 

if (/msie|trident/i.test(a))

{

// userAgent에 'msie'나 'trident'가 대소문자 구별없이 포함되어 있는지?

}

 

비 IE 브라우저들은 거의 게코(gecko) 엔진에 기반하고 있기 때문에 많은 부분 호환되나 조금씩 다른 부분이 있어 구별이 필요할 수도 있다.

 

var a = navigator.userAgent;

 

if (/firefox/i.test(a))

{

// 파이어폭스

}

else if (/chrome/i.test(a))

{

// 크롬

}

else if (/safari/i.test(a))

{

// 사파리

}

else if (/opera|opr/i.test(a))

{

// 오페라

}

 

크롬과 사파리는 내부적으로 같은 엔진을 사용하고 있어 특별히 구별하지 않아도 대부분 같은 결과를 보인다.

 

if (/chrome|safari/i.test(a))

{

// 크롬과 사파리

}

 

모바일 브라우저의 구별

 

모바일 브라우저는 거의 웹 표준을 준수하고 있어 PC 환경 만큼 브라우저 사이의 차이가  그리 크지 않다.

따라서 모바일 환경에서는 어떤 브라우저냐 보다 모바일용 브라우저냐 아니냐를 알아나는게 더 중요하다.

 

그런데 문제는 현재 나와있는 모바일 기기가 너무 많고 각각의 기기는 기본으로 제공하는 브라우저마다 고유의 userAgent를 가지고 있다는 점이다.

이러한 모든 모바일 브라우저의 userAgent를 알아내서 프로그래밍한다는 것은 매우 어려운 일이다.

해서 현재 많이 쓰이는 기기를 대상으로 검사하게 된다.

 

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{

// 현재 많이 사용중인 기기의 브라우저만 검사

}

 

현재 가장 많이 쓰이는 모바일 기기는 안드로이드 계열과 아이폰 계열이므로 아래와 같이만 해도 대개 만족한다.

 

if (/android|iphone|ipad|ipod/i.test(navigator.userAgent))

{

// 안드로이드 계열과 아이폰 계열만 검사

}

 

아이폰과 안드로이드 계열  브라우저는 대개 userAgent에 'Mobile'이라는 단어가 포함되어 있다.

따라서 아래와 같이 간단히 해도 대부분 포함한다고 볼 수 있다.

 

if (/mobile/i.test(navigator.userAgent))

{

// 모바일 브라우저 대부분은 userAgent에 'mobile'을 포함하고 있다.

}