[ JS ] iPad safari에서 모바일 체크하기

애플에서 iPad의 userAgent를 Mac이랑 통합을 해버려 아래의 코드만으로 ipad 인지 체크를 할 수 없다.

/iPad/.test(navigator.userAgent);

 

실제로 userAgent를 확인해 보면 useAgent에 iPad가 사라져 있다.

• iPad - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15
• MacBook - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

 

chrome에서는 알아서 처리를 해서 잘 되는데 safari에서는 따로 설정을 추가해줘야 한다.

navigator의 maxTouchPoints는 스크린의 최대 터치 가능 포인트 수를 말하는데 일반적인 데스크톱의 경우 0이 나오고 iPad의 경우 5가 나온다. 

maxTouchPoints가 있을 때 iPad 체크를 하는데 여기서 Macintosh와 iPad를 함께 검사를 해주는 이유는 safari에서는 Macintosh로 나오지만 chrome에서는 iPad로 나오기 때문에 두 가지 경우를 체크를 해줘야 한다.

    if (navigator.maxTouchPoints > 1) {
      const isIPad = /Macintosh|iPad/.test(navigator.userAgent);
      if (isIPad) return true;
      return false;
    }

 

전체코드

export function isMobile() {
  if (typeof window !== 'undefined') {
    if (navigator.maxTouchPoints > 1) {
      const isIPad = /Macintosh|iPad/.test(navigator.userAgent);
      if (isIPad) return true;
      return false;
    }
    return /Mobi|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }
  return false;
}