모바일 웹을 위한 브라우저 크기 및 기기 정보 체크하는 자바 스크립트

최근 모바일 웹을 지원하는 반응형 웹을 만드는 경우가 많다. 

미디어쿼리나 부트스트랩(Bootstrap)을 활용해서 쉽게 반응형 웹을 만들기도 하지만 

경우에 따라서 직접 모바일 기기인지 체크해야 하는 때도 많다. 

그렇다면 모바일 브라우저를 어떻게 구분해 낼까? 

자바스크립트로 브라우저 크기 구분

먼저 브라우저의 크기로 구분해 내는 방법이 있다. 

자바 스크립트의 document.body.clientWidth 값을 가져와서 사용하면 된다. 

소스를 살펴보자

if (document.body.clientWidth < 800) { // 모바일 기기 관련 작업 }

실제 몇몇 기기의 document.body.clientWidth의 값을 체크해 보면 다음과 같다. 

디바이스	인치	세로모드	가로모드
아이폰 6	4.7인치	375	641
넥서스 5	4.95인치	346	574
넥서스 7	7인치	577	924
맥북에어	13인치	1080

위 값을 참조해서 800이란 숫자를 변경해서 사용하면 된다.

본인이 사용하는 기기의 viewport 크기, device 크기, document 크기 값을 알고 싶다면 다음 사이틀 한번 방문해 보기 바란다. 

http://ryanve.com/lab/dimensions/

자바스크립트로 기기 구분 

자바스크립트로 기기를 구분하기 위해서는 navigator.userAgent 값을 활용한다. 

navigator 객체는 브라우저의 버전과 종류 등 웹브라우저의 정보를 제공하는 객체이다. 

이 중 userAgent는 브라우저가 User-Agent HTTP 헤더에 넣어 전송하는 문자열로 appName과 appVersion을 비롯한 다양한 정보가 포함되어 있다. 

원래 userAgent는 웹에서 넷스케이프 네비게이터와 인터넷 익스플로러의 크로스 브라우징을 위해 주로 사용되었다. 

예전에 넷스케이프와 익스플로러가 상호호환이 안되어서 userAgent로 구분해서 코딩했던 기억이 난다. 

모바일 환경이 되면서 각 모바일 기기에서는 userAgent에 단말기 정보를 포함해서 보내므로 이를 통해 구분하면 된다. 

간단하게 아이폰과 안드로이드를 구분하는 소스는 다음과 같다. 

if (navigator.userAgent.match("iPhone") != null){ // 아이폰 관련 처리 } else if (navigator.userAgent.match("Android") != null) { // 안드로이드 관련 처리 } else { // 기타 처리 }

실제 브라우저별 사용하는 userAgent의 값은 다음과 같다. 

구분	userAgent 값
iPhone	Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25
iPhone 크롬	Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) CriOS/28.0.1500.16 Mobile/10B329 Safari/8536.25 (00236FCC-CE47-4774-9A79-DBBEEC199F9A)
iPad	Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25
Android(갤럭시 S4)	Mozilla/5.0 (Linux; Android 4.2.2; ko-kr; SAMSUNG SHV-E300K/KKUAME7 Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Version/1.0 Chrome/18.0.1025.308 Mobile Safari/535.19
MacOS 사파리	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/536.30.1 (KHTML, like Gecko) Version/6.0.5 Safari/536.30.1
MacOS 크롬	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
MacOS 파이어폭스	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:22.0) Gecko/20100101 Firefox/22.0
Windows IE	Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; .NET4.0E; .NET4.0C)
Windows 크롬	Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.72 Safari/537.36
Windows 파이어폭스	Mozilla/5.0 (Windows NT 6.2; rv:22.0) Gecko/20100101 Firefox/22.0