터치 스크린 장치 감지의 핵심 원리
'터치 스크린' 장치를 감지하는 가장 좋은 방법은 문서 객체 모델(DOM) 안에 터치 관련 이벤트나 메서드가 존재하는지 확인하는 것입니다. 가장 널리 쓰이는 방식은 'ontouchstart' 속성의 존재 여부를 검사하는 것입니다.
function checkTouchDevice() {
return 'ontouchstart' in document.documentElement;
}코드 설명
document.documentElement는 HTML 문서의 최상위 요소인 <html> 태그를 가리킵니다. 터치를 지원하는 브라우저에서는 이 요소에 ontouchstart 이벤트 핸들러 속성이 자동으로 정의되므로, in 연산자로 해당 속성이 존재하는지만 확인하면 됩니다. 결과적으로 터치 입력을 지원하는 환경에서는 true, 그렇지 않은 환경에서는 false가 반환됩니다.
모바일과 데스크톱 구분하여 처리하기
이 함수를 활용하면 접속한 기기가 모바일인지 데스크톱인지 간단히 판별할 수 있습니다.
if (checkTouchDevice()) {
// 터치 지원 기기 (모바일, 태블릿 등)
} else {
// 터치 미지원 기기 (데스크톱)
}참고: 더 정밀한 감지가 필요할 때
ontouchstart 방식은 대부분의 브라우저에서 잘 동작하지만, 일부 최신 브라우저나 특수한 환경에서는 한계가 있을 수 있습니다. 보다 정확한 판별이 필요하다면 아래 방법들을 함께 고려해 볼 수 있습니다.
- navigator.maxTouchPoints: 기기가 동시에 인식할 수 있는 터치 포인트 수를 반환합니다. 값이 0보다 크면 터치를 지원합니다.
- matchMedia('(pointer: coarse)'): 주 입력 장치가 터치처럼 넓은 포인팅 정확도를 가진 경우 참을 반환합니다.
const isTouchDevice =
navigator.maxTouchPoints > 0 ||
window.matchMedia('(pointer: coarse)').matches;여러 방식을 조합하면 다양한 기기와 브라우저 환경에서도 안정적으로 터치 스크린 여부를 판별할 수 있습니다.