[JS] 모바일 기기를 판별하는 6가지 방법

navigator.userAgent

---

브라우저 API에서 제공하는 userAgent 문자열을 확인하는 방법. userAgent는 유저 디바이스의 정보를 담고 있다. 자바스크립트에선 navigator.userAgent 속성으로 접근할 수 있다.

 

 

userAgent 문자열이 mobi, android iphone 등 키워드를 담고 있다면 모바일 기기로 접속했다고 볼 수 있다. 가장 간단한 방법이지만 사용자가 직접 userAgent 값을 수정할 수 있기 때문에 100% 신뢰할 순 없다.

// 방법 1
// 정규식은 기본적으로 대소문자를 구분한다. i 플래그로 대소문자를 구분하지 않도록 할 수 있다
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
  // 현재 장치는 모바일 기기
}

// 방법 2
if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // 현재 장치는 모바일 기기
}

 

Chromium 계열의 브라우저는 userAgent와 비슷한 역할을 하는 navigator.userAgentData 라는 속성이 있다. 차이점은 사용자 에이전트 문자열을 객체로 파싱하고, 해당 객체 안의 mobile 속성을 통해 사용자의 모바일 장치 사용 여부를 boolean 값으로 확인할 수 있다.

const isMobile = navigator.userAgentData.mobile;

 

💡 애플의 Safari와 Firefox는 userAgentData 속성을 지원하지 않는다. 자세한 내용은 caniuse 참고

 

window.screen, window.innerWidth

---

스크린 너비를 통해 모바일 디바이스인지 확인하는 방법. window.screen 객체는 유저 디바이스의 스크린 정보를 반환한다(모니터 사이즈). 이 객체의 width 속성이 바로 스크린 너비. 유저가 가로모드로 핸드폰을 사용한다면 모바일 기기인지 식별할 수 없는 단점이 있다.

if (window.screen.width < 500) {
  // 현재 장치는 모바일 기기
}

 

또 다른 속성인 window.innerWidth 는 브라우저 창 안쪽의 뷰포트(사용자에게 보여지는 영역) 너비를 반환한다. 스크롤바도 포함한 값이다. 웹페이지의 각 너비마다 다른 스타일을 지정할 때 유용하다.

const getBrowserWidth = () => {
  if (window.innerWidth < 768) {
    return "xs";
  } else if (window.innerWidth < 991) {
    return "sm";
  } else if (window.innerWidth < 1199) {
    return "md";
  } else {
    return "lg";
  }
};

 

• window.screen.width / height : 모니터 사이즈
• window.outerHeight / outerWidth : 브라우저 전체 사이즈
• window.innerHeight / innerWidth : 스크롤바 포함 뷰포트 사이즈
• document.documentElement.clientWidth / clientHeight : 스크롤바 제외 뷰포트 사이즈

 

window.orientation

---

스크린 방향을 감지하는 방법. 휴대폰은 언제든지 스크린 방향을 바꿀 수 있지만, 데스크탑 모니터는 고정시켜 놓고 사용하는게 일반적이다.

 

window.orientation 속성은 현재 스크린의 방향 값을(각도) 반환한다. 모바일 기기에서만 해당 속성 값이 존재한다. 데스크탑에선 undefined를 반환한다.

if (typeof window.orientation !== 'undefined') {
  // 현재 장치는 모바일 기기
}

 

iOS 크롬 브라우저로 codepen에 접속한 뒤 콘솔창에 `window.orientation`을 입력하면 확인할 수 있다(0은 세로, 90은 가로)

 

💡 iPhone의 Safari 브라우저는 해당 속성을 지원하지 않는다.

 

touch 이벤트

---

휴대폰 브라우저의 DOM 요소는 ontouchstart 속성으로 touch 이벤트에 대해 리스너 함수를 지정할 수 있다. 데스크탑 DOM엔 ontouchstart 속성이 없기 때문에 이를 이용해 모바일 장치인지 판별할 수 있다.

// 방법 1
function isMobile() {
  return 'ontouchstart' in document.documentElement;
}

// 방법 2
function isMobile() {
  try {
    document.createEvent('TouchEvent');
    return true;
  } catch (e) {
    return false;
  }
}

 

참고로 in 연산자는 명시한 속성이 객체에 존재하는지 여부를 boolean 값으로 반환한다.

const arr = [1, 2, 3, 4, 5];
0 in arr; // true (0번 index가 존재하므로)
5 in arr; // false (5번 index가 존재하지 않으므로)
'length' in arr; // true (배열은 length 프로퍼티를 가지므로)
'concat' in arr; // true

const obj = { name: 'Smith', age: 30 };
'name' in obj; // true
'city' in obj; // false

 

window.matchMedia()

---

CSS를 활용해 모바일 장치인지 확인하는 방법. CSS는 미디어 쿼리를 통해 웹 페이지의 반응형 스타일을 지정한다. 만약 모바일에 대응한 미디어 쿼리 구문이 유효하다면, 현재 장치는 모바일이라고 판단할 수 있다.

 

window.matchMedia() 메서드는 CSS의 미디어 쿼리문을 매개변수로 받아, 해당 문이 유효한지 판단한다.

 

아래 코드에서 window.matchMedia() 메서드가 받은 파라미터의 미디어 쿼리문은 760px을 초과하지 않는 스크린에서만 유효하다. window.matchMedia() 메서드가 반환하는 객체의 matches 속성은 boolean 값을 반환한다. true 라면 미디어 조회(media query)에 성공했다는 뜻이고, 그럼 유저의 현재 장치는 모바일이라고 볼 수 있다.

let isMobile = window.matchMedia('only screen and (max-width: 760px)').matches;

 

 

참고로 미디어 쿼리의 only 연산자는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이다. 생략했을 때 기본값은 only로 처리한다. — 참고

 

포인터의 정확도로 판단하는 방법도 있다. pointer:coarse CSS 구문은 현재 장치의 포인터가 정확하지 않음을 나타낸다. 휴대폰은 마우스를 지원하지 않고 터치만 지원하므로 이 조건을 만족한다.

let isMobile = window.matchMedia('(pointer:coarse)').matches;

 

일부 장치는 마우스와 터치 같은 여러 포인터를 동시에 지원한다. pointer:coarse는 메인 포인터를 판단하는 데만 사용된다. 이땐 모든 포인터를 판별하는 any-pointer 명령을 사용할 수 있다. 모든 포인터 중 하나의 포인터라도 정확하지 않으면 쿼리 조건을 충족한다.

let isMobile = window.matchMedia('(any-pointer:coarse)').matches;

 

react-device-detect 라이브러리 활용

---

위 5가지 방법 외에, 이미 다른 사람이 작성해놓은 라이브러리를 사용하는 방법도 있다. React를 사용한다면 다양한 기능과 세분화된 장치 감지를 지원하는 react-device-detect 추천한다.

import { isMobile } from 'react-device-detect';

if (isMobile) {
  // 현재 장치는 모바일 기기
}

 

CSS 미디어 쿼리

---

CSS min-width max-width 쿼리를 이용하면 스크린 폭에 따라 원하는 스타일을 적용할 수 있다. 하지만 기기마다 화면 크기가 천차만별이기 때문에 어떤 폭을 기준으로 삼을지 애매하다. 대신 pointer hover 쿼리를 이용해서 더 현대적인 방법으로 모바일 기기를 판별할 수 있다. — 참고 글 1 | 참고글 2

coarse는 거친(반의어 smooth), 굵은(반의어 fine) 등의 뜻을 가진 단어

 

pointer 쿼리 — 포인터 장치 유무 판단

• none : 포인터 장치가 없을 때
• coarse : 포인터 장치가 있지만 정확도가 높지 않을 때(터치스크린, 키넥트 등)
• fine : 정밀 포인터 장치일 때(마우스, 터치패드 등)

 

hover 쿼리 — hover 가능 여부 판단

• hover : 기본 장치로 정확한 hover를 할 수 있을 때(마우스, 터치패드 등)
• none :
  1. 포인터 장치가 없을 때
  2. 포인터 장치가 hover를 지원하지 않을 때
  3. 호버 가능한 장치가 있으나 롱탭(Long Tab) 동작으로 hover 해야할 때(터치스크린 등)

 

pointer, hover 두 쿼리를 결합해서 디바이스를 판단하는 예시

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) { }

/* stylus-based screens */
@media (hover: none) and (pointer: fine) { }

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) { }

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) { }

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요