브라우저 구분

웹 프로그램을 하다보면 크로스브라우징을 위해 브라우저의 종류를 구별해 내야할 때가 있다.

현존하는 브라우저 대부분이 웹 표준을 준수하고 있기는 하지만 조금만 깊게 들어가면 아직 표준이 정해지지 않은 것도 많고 브라우저마다 다르게 표현되는 부분이 많다.

대개는 현재 많이 사용하는 5가지 브라우저(IE, 파이어폭스, 크롬, 사파리, 오페라)를 대상으로 프로그램밍한다.

 

우선 브라우저의 자바스크립트 엔진이 IE(인터넷 익스플로러)냐 아니냐의 구별이 중요하다. IE의 최근 버전은 웹 표준을 수용하고 있어 비 IE 브라우저와 많이 호환되지만 아직 차이가 있고 IE 이전 버전의 사용자도 많다.

 

​자바스크립트에서 브라우저 구분을 위해서는 대개 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'을 포함하고 있다.

}

 

그러나 위 코드가 100% 모든 모바일 브라우저를 알아낼 수 없으니 웹 페이지 적당한 위치에 수동으로 '모바일 버전' 또는 'PC 버전'을 선택할 수 있게 하는 것이 바람직하다. 

[출처] [자바스크립트] 브라우저 구별(구분)|작성자 파랑새