모바일 감지를 위한 tip

css-tricks.com/touch-devices-not-judged-size/

Touch Devices Should Not Be Judged By Their Size | CSS-Tricks

이 글을 읽고 생각하게 되었다.

 

React에서는 이렇게 mobile을 감지했는데 브라우저 가로 폭의 길이에 따라 감지하는게 핵심이다.

(순수 js라면 media query를 이용하면 된다)

그러나 모바일의 크기가 점차 커지고 있으므로 이는 모바일을 감지하기에 좋은 방법이 아니다.

 

 

1. user-agent 이용하기

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

그러나 초보자인 나도 user-agent 따위는 조작할 수 있으므로 적절하지 않다.

 

 

2. 브라우저가 pointer:coarse를 지원하는지로 감별하기

 

window.matchMedia를 이용합니다.

developer.mozilla.org/ko/docs/Web/API/Window/matchMedia

if (window.matchMedia("(min-width: 400px)").matches) {
  /* 뷰포트 너비가 400 픽셀 이상 */
} else {
  /* 뷰포트 너비가 400 픽셀 미만 */
}

 

pionter:coarse를 통해 체킹해보자.

 

pointer:fine 이면 웹 환경일터이고, pionter:coarse면 모바일일 터이다.

const isMobile = function() {
    const match = window.matchMedia('(pointer:coarse)');
    return (match && match.matches);
};

 

* 이 프로젝트 상당히 괜찮더라. 

htmldom.dev/detect-mac-os-browser

Manage HTML DOM with vanilla JavaScript