ProgrammingJavaScript

Javascript userAgent 속성-브라우저 정보 확인하기

JavaScript, userAgent

DOM 객체 Navigator의 userAgent라는 속성이 있다.

이 속성은 브라우저의 정보를 표시해주는 속성이다.

현재 사용하고 있는 브라우저의 정보를 확인할 수 있다.

모바일도 각각의 브라우저가 있다.

userAgent 속성은 브라우저에서 서버로 보낸 사용자 에이전트 헤더의 값을 반환한다.

반환 된 값에는 브라우저의 이름, 버전 및 플랫폼에 대한 정보가 들어 있다. (이 프로퍼티는 읽기 전용이다.)

문법

1
navigator.userAgent

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<body>

<div id="demo"></div>

<script>
var txt = "";
txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Browser Language: " + navigator.language + "</p>";
txt += "<p>Browser Online: " + navigator.onLine + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

//결과
Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36

Cookies Enabled: true

Browser Language: ko

Browser Online: true

Platform: MacIntel

User-agent header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36

인터넷에서 바로 userAgent를 확인할 수 있는 사이트도 있다.

User Agent String.Com

Javascript 로 userAgent를 가져와서 간단하게 모바일 디바이스를 구분하는 함수 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 모바일 에이전트 구분
var isMobile = {
        Android: function () {
                 return navigator.userAgent.match(/Android/i) == null ? false : true;
        },
        BlackBerry: function () {
                 return navigator.userAgent.match(/BlackBerry/i) == null ? false : true;
        },
        IOS: function () {
                 return navigator.userAgent.match(/iPhone|iPad|iPod/i) == null ? false : true;
        },
        Opera: function () {
                 return navigator.userAgent.match(/Opera Mini/i) == null ? false : true;
        },
        Windows: function () {
                 return navigator.userAgent.match(/IEMobile/i) == null ? false : true;
        },
        any: function () {
                 return (isMobile.Android() || isMobile.BlackBerry() || isMobile.IOS() || isMobile.Opera() || isMobile.Windows());
        }
};
//출처: http://cofs.tistory.com/214 [CofS]

사용방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if(isMobile.any()){
    if(isMobile.Android()){

    }else if(isMobile.IOS()){

    }else if(isMobile.BlackBerry()){

    }else if(isMobile.Opera()){

    }else if(isMobile.Windows()){

    }
}
//1# : any 함수로 모바일인지 아닌지를 구분한다.
//2# ~ : 각 모바일 디바이스를 구분한다.
//출처: http://cofs.tistory.com/214 [CofS]
Share