JS 로 접근 디바이스 판별하기(모바일/PC 구분)

개요

• 웹에서 접근 디바이스(모바일 / PC) 를 구분하는 방법들을 정리합니다

 

1. UserAgent “Mobi” 키워드

• userAgent 에서 Mobi 키워드를 가지고 있는지를 확인하는 방법(Mobi 있을시 mobile 로 취급)
• MDN 공식문서에서 추천하고 있는 방법
• 주요 모바일 장치에서 주요 브라우저를 실행시켰을때의 userAgent 값을 비교 정리해 만들어낸 값

한계점

• 겔러시 폴드와 같이 예외적 user-agent 값을 갖는 케이스가 존재함
  • [접었을때] Mozilla/5.0 (Linux; Android 13; SM-F926N Build/TP1A.220624.014; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/120.0.6099.43 Mobile Safari/537.36KlipFrontend/1.0.0 (KlipMobile)KlipDev 2.6.0
  • [폈을때] Mozilla/5.0 (Linux; Android 13; SM-F926N Build/TP1A.220624.014; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/120.0.6099.43 Safari/537.36KlipFrontend/1.0.0 (KlipMobile)KlipDev 2.6.0
• 테블릿이 PC 로 구분되어짐

 

2. userAgent 의 OS 로 구분

• 주요 모바일 OS 가 갖는 userAgent 값을 통해 접근 다바이스 판단
• 한계점 : 새로운 OS 에 대해서 추가가 필요함

function isMobile() {
  const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  return regex.test(navigator.userAgent);
}

3. 라이브러리 사용

• userAgent를 기준으로 판단하며 완벽하게 구분해낼 수 없다고 명시함
• https://github.com/hgoebl/mobile-detect.js

GitHub - hgoebl/mobile-detect.js: Device detection (phone, tablet, desktop, mobile grade, os, versions)

 

4. 그 외

기준 화면 크기로 분기

• 화면에 크기에 따라 구분 함
• 그 값을 특정하기가 어려움

TouchEvent

• navigator 오브젝트의 maxTouchPoints 를 통해 터치가 가능한지로 모바일 구분
• 터치가 가능한 PC, 크롬 개발자의 디바이스모드 등에 대한 대응이 불가함

 

기본적으로 userAgent 의 값은 수정 될 수 있기에 완벽하게 대응할 수는 없음
테블릿, Z-Fold 분류에 따라 상황 상황에 맞는 판단이 필요 함

참고 
https://medium.com/geekculture/detecting-mobile-vs-desktop-browsers-in-javascript-ad46e8d23ce5

Detecting Mobile vs. Desktop Browsers in JavaScript

https://developer.mozilla.org/ko/docs/Web/HTTP/Browser_detection_using_the_user_agent#%EC%82%AC%EC%9A%A9%EC%9E%90_%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8%EC%9D%98_%EC%96%B4%EB%8A%90_%EB%B6%80%EB%B6%84%EC%97%90_%EC%B0%BE%EA%B3%A0_%EC%9E%88%EB%8A%94_%EC%A0%95%EB%B3%B4%EA%B0%80_%ED%8F%AC%ED%95%A8%EB%90%98%EC%96%B4_%EC%9E%88%EB%82%98%EC%9A%94

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