터치스크린 지원여부 확인

회사 프로젝트에서 터치스크린을 지원하는지의 유무를 확인하는 코드가 있었다

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

• MDN : GlobalEventHandlers.ontouchstart
• MDN : Navigator.maxTouchPoints