[JavaScript] 모바일 브라우저 감지하기

예전에 만들었던 기능에 문제가 생겼다. 모바일 브라우저를 감지하는 목적으로 navigator.userAgent 속성을 사용했었는데 이렇게 하니 데스크톱 모드를 킨 모바일 기기는 구분이 안된다는 것이다. 확인해보니 모바일 브로우저에서 데스크톱 모드를 사용하면 user agent 문자열에서 "Android" 문자열이 사라진다…

 

이래저래 찾아보니 애초에 user agent 문자열은 쉽게 조작이 가능해 다른 방법들과 같이 사용하는 것이 좋다고 한다. 예를 들어, 밑에 처럼 스크린 사이즈와 터치 스크린의 유무를 확인한다는 식으로.

var uagent = navigator.userAgent.toLowerCase();
var isTablet = (/ipad|xoom|sch-i800|(android(?!.*mobile))|playbook|tablet|kindle/i.test(uagent));
var isMobile = (/mobile|iphone|ipod|blackberry|windows\sce|palm|smartphone|iemobile|NOKIA/i.test(uagent));
var isSmallScreen = window.matchMedia('(max-width: 800px)').matches;
var isTouchDevice = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
var isMobileDevice = isTablet || isMobile || (isSmallScreen && isTouchDevice);

window.matchMedia(): 문자열 형태의 미디어 쿼리를 받아 현재 document가 해당 미디어 쿼리를 충족하는지 확인.

navigator.maxTouchPoints: 기기에서 동시에 터치할 수 있는 지점의 개수를 반환 (Desktop은 0을 반환)

 

isSmallScreen과 isTouchDevice를 &&로 묶은 이유는 터치 기능이 있는 노트북을 걸러내기 위해서이다.

물론 이 방법도 완벽한 방법은 아니라지만 일단 웬만한건 이걸로 감지 되는 것 같다.