이 글로 버그 잡았으면 !!!! 댓글 하트 구독 박으세요 어서
보통 JavaScript에서 접속한 단말의 종류(ex. 데스크탑, 모바일)를
판단하는데 UserAgent라는 값을 참고함.
아니 근데 이런 양아치 애플님들이
작년부터 iPad의 데스크톱화를 말하면서
Safari에서 Mac Desktop 모델들과 같은
UserAgent 값을 보내주기 시작했다.
위와 같이 Google Chrome 착한 친구들은
브라우저에서 알아서 iPad인지 판단해서
User Agent 값을 넣어주더라...
iPad Pro's UserAgent by Chrome
iPad: CPU OS 13_6 like Mac OS X
MacBook Pro's UserAgent by Chrome
Macintosh, Intel Mac OS X 10_15_1
하지만 Apple Safari 나쁜 친구들는
양아X처럼...
Desktop이던 테블릿이던 똑같이 보내준다..
iPad Pro's UserAgent by Safari
iPad: CPU OS 13_6 like Mac OS X
MacBook Pro's UserAgent by Safari
Macintosh, Intel Mac OS X 10_15_1
그래서 한때 커뮤니티에서도 난리 났었음
https://developer.apple.com/forums/thread/119186?page=2
어쨋든 나는 이부분을 판단하기위해
Device의 터치 기능 여부를 확인하기로 했다.
| Safari Browser | userAgent에 Mac OS 포함 | userAgent에 Mac OS 미포함 |
| maxTouchPoints 값이 0 | Desktop Device | Apple 제품 아님 |
| maxTouchPoints 값이 5 | iPad | Apple 제품 아님 |
Navigator.maxTouchPoints
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/maxTouchPoints
위 링크를 참고하면 알 수 있겠지만
maxTouchPoints는 기기의 최대 동시 터치수를 말한다.
Desktop(맥북포함)은 0 iPad는 5를 리턴한다.
(단, Desktop 제품이 Touch 기능이 안나온다는 가정...)
추가적으로 코드를 첨부할 필요가 있나 싶지만 코드를 첨부한다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root">
<div>
<span>User Agent : </span><span class="userAgent"></span>
</div>
<hr>
<div>
<span>최대 터치 수 : </span><span class="maxTouchPoints"></span>
</div>
<hr>
</div>
<script>
document.querySelector('.maxTouchPoints').innerText = `${navigator.maxTouchPoints}`;
document.querySelector('.userAgent').innerText = `${navigator.userAgent}`;
</script>
</body>
</html>
이 글로 버그 잡았으면 !!!! 댓글 하트 구독 박으세요 어서
'Language & Library > JS & TS' 카테고리의 다른 글
| [Deno Study 1] Getting Started (0) | 2021.01.25 |
|---|---|
| [TypeScript] 재귀적인 타입 선언 (recursive type) (3) | 2020.12.10 |
| [JavaScript] Vanilla JS로 React 만들기 (0) | 2020.09.09 |
| [JavaScript] Vanilla JS로 상태 관리 모듈(redux) 만들기 (0) | 2020.09.04 |
| [JavaScript] clearTimeout / setTimeout 함수와 Singleton 패턴을 이용한 딜레이 함수 구현 (0) | 2020.08.21 |
댓글