티스토리 뷰

Javascript & Node

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

터프남 2021. 1. 3. 17:26
728x90

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

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

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

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

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

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

문법

navigator.userAgent

예제

<!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를 확인할 수 있는 사이트도 있다.

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

// 모바일 에이전트 구분
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());
        }
};

사용방법

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]

 
728x90
저작자표시
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
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
글 보관함