[Javascript] PC, MOBILE 구분하기 (Navigator 사용)

최근 개발 중 PC, MOBILE 을 구분하여 처리하는 로직에서 오류가 발생하였습니다.

결제 모듈을 호출하는 부분에서 PC 모듈을 호출해야 하지만 MOBILE 모듈을 호출하여 발생한 문제였습니다.

지금까지 잘 되던게 왜 갑자기 안될까?

의문을 갖고 PC, MOBILE 구분 함수를 찾아보았습니다.

함수는 아래와 같이 코딩되어 있었습니다.

(인터넷에서 많이 볼 수 있는 코드죠..)

-- JavaScript

var filter = "win16|win32|win64|mac";

var vWebType = "";

if (navigator.platform ) {

if (filter.indexOf(navigator.platform.toLowerCase()) < 0) {

vWebType = "MOBILE";

} else {

vWebType = "PC";

}

}

-- 사용자 User-Agent 는 아래와 같았습니다.

mozilla/5.0 (macintosh; intel mac os x 10_12_3) applewebkit/537.36 (khtml, like gecko) chrome/56.0.2924.87 safari/537.36

예전에는 User-Agent 로 MOBILE 인지 아닌 지 체크를 많이 했었는데 (아닌가요..? -.-;;) 모바일 디바이스의 종류가 매우 방대해짐에 따라 

PC, MOBILE 체크 시에 MOBILE 인지 아닌지 보다는 PC 인지 아닌지 여부로 체크를 하는 게 보편화된 것 같습니다.

아무튼 지금까지는 위 처럼 사용되는 로직에 문제가 없다가 왜 갑자기 발생된 걸까요?

찾아보니 PC 종류 하나가 빠져있었습니다.

Javascript Navigator 의 Platform 정보로 조회 되는 PC 기기는 아래 5가지 종류입니다.

Win16 : 16비트 윈도위기반 컴퓨터

Win32 : 32비트 윈도위기반 컴퓨터

Win64 : 64비트 윈도위기반 컴퓨터

MacIntel  :  인텔CPU 를 가진 매킨토시 컴퓨터

Mac : 매킨토시컴퓨터

위의 5가지의 디바이스 정도가 PC 로 접속 시 조회 가능한 Navigator Platform 의 값입니다.

이 외의 것은 모바일로 봐도 될 거라고 합니다.

이렇게 찾아보니 하나가 빠졌더군요. 

MacIntel  :  인텔CPU 를 가진 매킨토시 컴퓨터

.... 매킨토시는 매킨토신데 CPU 가 인텔 꺼랍니다..

var filter = "win16|win32|win64|mac|macintel";

로 변경하여 처리 완료되었네요.

참고로 Navigator Object 의 Properties 관련 내용 메모해 보겠습니다.

콘솔이나 알럿으로 확인 가능하겠습니다.

ex: console.log(navigator.userAgent);

navigator.appCodeName : 웹브라우저 코드이름

navigator.appName : 웹브라우저 이름

navigator.appVersion : 웹브라우저 버전

navigator.cookieEnabled : 웹브라우저 쿠키 사용 가능 유무

navigator.language : 웹브라우저 언어

navigator.onLine : 사용자 온라인 상태 여부

navigator.platform : 플랫폼

navigator.userAgent : 브라우저 구분값(웹브라우저 이름 전체)