javascript | 모바일 브라우저 userAgent로 디바이스 구분하기 / android ios 구분하기

 

 

javascript 로 모바일 디바이스를 구분해 보자

 

모바일 브라우저도 저마다 브라우저와 디바이스(OS 등) 등을 구분할 수 있는 userAgent 가 있고 그 안에는 특별한 keyword 가 있다.

 

 

브라우저의 userAgent에 대한 자세한 설명은 생략한다.

 

궁금하면 검색하면 무수히 많은 정보가 나오고 또한 관심있으면 UserAgentString 에서 구분해 보는것도 나쁘지 않다.

 

UserAgentString 사용방법 예 :  

1. 크롬 실행

2. User-Agent Switcher for Chrome 등 비슷한 agent 변환 확장프로그램 설치

3. http://useragentstring.com/index.php 접속

4. user agent 바꿔가면서 화면에 출력되는 정보 확인

 

 

 

 

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());
        }
};

 

공통 js 파일이 있다면 그곳에 선언 후 사용하면 된다.

 

위 함수를 간단히 설명하자면 모바일 디바이스를 각각 구분하는 함수와 모든 모바일을 or 형태로 구분하는 함수(모바일인지 체크하는 함수)로 나뉜다.

 

각 함수는 boolean 값을 return 한다.

 

 

사용방법은 다음과 같다.

 

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# ~ : 각 모바일 디바이스를 구분한다.