iOS 13 iPad의 User-agent 이슈

PC 홈페이지와 모바일 홈페이지를 같이 운영하다 보면 사용자가 어느 쪽으로 접속하던 사용하는 매체에 맞는 환경으로 이동시켜 주기 위해 user-agent 속성으로 현재 접속한 환경을 판단합니다.

 

 

iOS의 같은 경우 보통 아래와 같은 로직으로 판단합니다.

const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i) === null ? false : true;

iOS 디바이스의 브라우저나 애플리케이션의 웹뷰에서는 "iPhone" 이나 "iPad" 등이 포함되어 있기 때문에 위와 같이 판단할 수 있었습니다만 iOS 13으로 올라오면서 iPad의 user-agent 값이 Mac과 동일하게 아래와 같이 바뀌어 버렸습니다.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko)

그래서 해당 디바이스를 사용하는 사용자는 모바일 도메인으로 접근해도 PC 홈페이지로 이동해 버리는 현상이 발생하였는데, user-agent를 봐도 Mac과 구분할 수 있는 방법이 없습니다.

 

navigator.maxTouchPoints

navigator 속성 중 디바이스의 최대 동시 터치 수를 return 하는 속성이 있고, iPad의 경우 5를 return 합니다. 일단 또 다른 형태의 디바이스가 나오면 이 방법도 무용지물이 될 수 있겠지만 아직까지는 iOS 13 이상의 iPad를 구분할 때는 해당 속성을 사용하여 구분할 수 있습니다.

const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i) === null && navigator.maxTouchPoints != 5 ? false : true;

navigator.maxTouchPoints 의 속성의 상세 내용에 대해서는 아래 링크를 참고합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/maxTouchPoints

Navigator.maxTouchPoints - Web APIs | MDN