[JavaScript] 자바스크립트에서 터치 디바이스 사용 확인하기

094_자바스크립트에서 터치 디바이스 사용 확인하기

[적용]

• 데스크탑과 모바일 브라우저에 따라 처리를 구분하고 싶을 때

---

[문법]

속성	의미	반환
window.ontoucjstart	터치 기능 시작 이벤트	함수
navigator.pointerEnabled	포인터 사용 가능 여부	진리값
navigator.maxTouchPoints	포인터의 최대치	숫자

---

[내용]

터치할 수 있는 대표적인 디바이스는 iOS와 안드로이드의 스마트폰이며,

마이크로소프트의 서피스(Surface)처럼 윈도우즈에서 터치 작업이 가능한 디바이스도 있다.

터치 사용 여부의 확인을 위해 다음과 같은 코드를 사용할 수 있다.

const isSupported = !!(
	'ontouchstart' in window || // iOS & 안드로이드
    (navigator.pointerEanbled && navigator.maxTouchPoints > 0)
);  // IE 11+

 

window 객체의 터치 이벤트를 감시하는 핸들러 onthouchstart를 사용해 iOS와 안드로이드의 단말기를 확인할 수 있다.

윈도우즈용 터치 디바이스의 확인은 pointerEnabled 속성을 사용하며,

추가로 maxTouchPoints의 값이 0 이상인 경우에도 터치 조작이 가능한 디바이스로 판별할 수 있다.

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김