TIL 31 JS 다른종류 모바일 기기 감지 구별하는 방법

개발환경과 사용환경 디바이스에 따라 어떤 기능이 되는것도 있고 안되는것도 있다(예를들어 현재 ios에선 볼륨조절과 푸쉬알림을 쓸수없다). 이럴때 해당 서비스에 대해서 해당 디바이스에 따라서 보여지는 거나 기능을 다르게 해주어야 하는데, 여러가지 방법이 있다고 하는데 먼저 내가 선택한 방법을 적어볼까하다. 매우 간단하면서도 참신한 방법이라고 생각한다.

 

navigator.userAgent 와 정규식 이용

const isMobile = /iPhone|iPad|iPod|Android/i.test(window.navigator.userAgent)

형식은 이러하다. 정규식 // 안에 테스트하고싶은 디바이스 이름을 적고, .test() 함수를 써서 navigator.userAgent에 해당 디바이스가 있는지 확인 하는것이다. 만약 있다면 true를 반환 할것이고, 없다면 false 를 반환해준다. 이 조건을 이용하면 된다.

만약 콘솔에 console.log(navigator.userAgent)를 찍어보면 현재 내가 쓰고있는 디바이스의 환경을 볼수있다. 만약 pc로 이용한다면 1번째 사진처럼 Macos, Macintosh 등등이 나오고, 만약 크롬익스텐션을 이용하여 디바이스로 인식하게 해주면 두번째 사진처럼 iPhone 이라고  뜨는걸 볼수있다. 

 

해당 기능은 ios 환경에선 자바스크립트의 volume 조절을 직접 수정할수없고 오직 reading만 가능하고 볼륨크기1로 고정이 된다고 한다. 그래서 이럴땐 볼륨조절할려고 하면 아래와 같이 IOS 미지원 서비스 라는 문구를 뜨게 해주었다.

코드를 보면 해당 함수(마우스나 터치이벤트가 있을때 실행된다)에서 위에 정규식을 ios 에 담아서 false 이면 볼륨조절을 할수있게 해주었고, true 라면 애니메이션을 뜨게 만들어준것이다.

 

navigator 객체는 브라우저에 대한 정보를 가지고 있는 객체이다. 따라서 그 정보를 확인하여 조건을 줄수있다.

 

참고사이트:

자바스크립트로 모바일 기기 감지하는 여러 방법

 

[Javascript] navigator 객체

Navigator.userAgent - Web APIs | MDN

 

사용자 에이전트를 이용한 브라우저 감지 - HTTP | MDN

 

How to detect my browser version and operating system using JavaScript?

 

코딩교육 티씨피스쿨