아이패드의 분기처리, 그러니까 브라우저에서 아이패드인걸 어떻게 구분해요?

목차

· 왜 이 글을 쓰게 되었을까요?

· 아이폰과 아이패드 구분 방법

· 레퍼런스

---

왜 이 글을 쓰게 되었을까요?

 회사 업무를 진행하면서 다양한 환경에서 에디터가 사용되어야하기 때문에, 크로스 브라우징 환경을 워낙 많이 다루게 되었다. 심지어 IE까지 지원을 하기 때문에 크로스 브라우징 환경에서의 적응은 더더욱 중요해졌다. 이슈 중 에디터의 내용이 사파리의 모바일 환경에서 이미지 하이라이트가 되었을 때 하이라이트가 에디터 밖으로 노출되는 현상이 일어났고, 이에 따른 예외처리가 필요했다. 아이폰의 경우는 모바일에 따른 UserAgent 값이 출력이 잘 되지만 아이패드의 경우는 데스크톱으로 값이 출력되는 것을 확인했다.

 

 그렇다고, 데스크톱에 관련 CSS를 적용한다고 하면 해당 이슈를 수정한다고 해도 다른 브라우저에서 수정된 CSS로 인해 영향을 받을 수 있기 때문에 아이패드에 따른 분기처리가 필요했다. 애플이 iPad의 데스크톱화를 진행하면서 Safari에서 관련 모델들을 Mac Desktop 모델들과 같은 UserAgent 값으로 보내기 시작했다. IOS13부터는 패드로 접근을 시도하면 데스크톱 모드로 리다이렉션을 시키기 때문에 관련 자료를 분석할 수 있었다.

계속해서 구글링을 진행했고, 아이패드 환경에서 Safari 브라우저에 분기처리에 관련된 해결책을 찾을 수 있었고, 문제점을 통해 유입한 사람들이 해당 게시글을 통해 보다 시간을 절약할 수 있으리라 믿고 이렇게 글을 작성하게 되었다.

아이폰과 아이패드 구분 방법

 데스크톱과 패드의 큰 차이점은 maxTouchPoints의 값이 다르게 출력된다는 점이다. 데스크톱의 경우는 `0`, 패드의 경우는 `5`의 값으로 출력이 되며, 데스크톱의 경우는 일반적으로 터치가 불가하기 때문에 window.navigator.userAgent을 통해 현재 브라우저를 정규 표현식과 함께 사파리로 확인하고, window.navigator.maxTouchPoints가 5일 경우에 따른 예외처리를 통해 아이패드로 접속했을 때의 예외처리가 가능하다.

 

 navigator 개념이 조금 부족하다면, MDN 사이트에서 관련 프로퍼티와 내용들을 한국어로도 알려주고 있으니 해당 사이트를 통해 참고하며 공부해보는 것이 좋다. 크로스 브라우징을 고려한다면 한번쯤은 해당 웹 API로 접근해보는 것도 좋은 방법 중 하나라고 생각한다.

---

레퍼런스

 

[JavaScript] Safari에서 iPad 판단 하는 방법 (UserAgent, Navigator)

navigator.userAgent IOS13 이상에서 태블릿,휴대폰 확인하는방법.