[Javascript] 사용자가 접속한 기기환경 확인하기

토스 테스트 결제 api가 모바일 환경에서는 지원이 안된다고 해서 pc에서만 예약 - 결제가 가능하도록 구현해야 하는 사항이었다. 반응형으로 width를 구해서 태블릿 넓이 아래로는 결제를 막는식으로 하려고 했으나..

모바일 버전 api 화면(테스트 결제 불가)

 pc에서도 개발자도구의 반응형으로 접속해서 결제를 진행하면 모바일 버전의 결제 api로 바뀌어서 결제가 되지 않았다.

그런데 아래 사진과 같이 브라우저를 크기를 직접 줄여서 결제를 진행하면 정상적으로 된다..

 

브라우저창을 직접 줄였을 때 (결제 가능한 pc버전 화면)

 

따라서 반응형 넓이를 판단해서 막을 수 없고 사용자가 접속한 환경이 모바일인지 pc버전인지 확인해야만 의도한대로 기능을 구현할 수 있는 상황이다. 

난감한 마음에 바로 구글링을 해봤더니 navigator객체의 userAgent라는 메서드가 있다는것을 찾았다

Navigator
Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.Navigator 객체는 window.navigator 읽기 전용 속성으로 접근할 수 있습니다.

 

바로 콘솔을 찍어보았다

개발자도구의 반응형으로 접속하면 

Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/124.0.0.0 Mobile Safari/537.36 Edg/124.0.0.0

이런식으로 mobile이라고 찍힌다

 

반응형을 끄고 접속하면 mobile 표시가 없다 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0

 

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

이 함수를 이용해서 모바일을 판단하려고 했으나 아이패드의 경우에는 userAgent가 iPad로 안나오고 매킨토시..라고 나와서 isMobile이 false가 뜨는 문제가 있었다. 구글링을 하다가 찾은 블로그에서 애플이 아이패드도 데스크탑화를 진행하고 있기 때문에 사파리에서 접속했을때 매킨토시라고 뜨고, 크롬에서는 ipad로뜬다는 글을 보았다. (2020년도 글)

그런데 지금은 크롬에서도 매킨토시라고 뜨는 것을 보니 또 그새 바뀌었나보다..!

아무튼 블로그 글을 참고해서 maxTouchPoint를 사용해서 아이패드 인지 판단하는 로직을 추가했다.

iPad(모바일)일때 maxTouchPoints = 1 / PC에서는 0

 

  const isMobile = () => {
    const { userAgent, maxTouchPoints } = window.navigator; // 유저가 접속한 환경 정보 가져오기

    // MacOS를 실행하는 장치 중에서 터치 가능한 장치를(iPad) 확인
    const isMac = /Macintosh/i.test(userAgent);

    if (isMac && maxTouchPoints > 0) return true; // Macintosh이면서 터치 포인트가 1개 이상인 경우 iPad

    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi|mobi/i.test(userAgent);
  };