터치스크린 지원여부 확인
회사 프로젝트에서 터치스크린을 지원하는지의 유무를 확인하는 코드가 있었다
const isTouchable = navigator.maxTouchPoints || "ontouchstart" in document.documentElement;
대충 이런식이었는데 이거에 대해 좀 더 자세히 알아봤다
1. maxTouchPoints
이름 그대로 동시 터치를 최대 몇개까지 지원하냐는 뜻이다
예를 들어 아이패드에서 youtube를 최대화면으로 보거나 다시 축소할 때 두손가락으로 넓히고 좁히는 방식으로 터치한다
이렇게 하려면 최소 2개의 터치포인트를 지원하야한다
기기마다 최대 갯수는 다르겠지만 터치포인트가 존재하는 것 자체로 터치스크린이라는 말이다
return value는 number이고 window
객체 안에 포함되어 있다
2. ontouchstart
이름그대로 터치가 시작되면 event handler를 실행한다
컴퓨터 브라우저에서 이 값은 undefined
로 되어있기 때문에 터치가 가능한 기기인지 아닌지를 이 프로퍼티를 통해 알 수 있다
TL; DR
- maxTouchPoints : 동시터치가 최대 몇개까지 지원되는지
- ontouchstart : 터치 동작을 감지하는 이벤트
window.navigator.maxTouchPoints
가 아닌navigator.maxTouchPoints
로도 왜 정상적으로 작동하는지 의문이 있을 수 있는데 기본적으로window
객체는 생략이 가능하다
*References
Author And Source
이 문제에 관하여(터치스크린 지원여부 확인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ayaan92/터치스크린-지원여부-확인저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)