터치 전용 인터페이스에 대한 장치 입력 기능 결정 이 질문에 대한 현재 답변은 터치 이벤트 기능을 사용하여이를 수행하는 방법을 제공합니다. 그러나이 접근법은 마우스와 터치 입력 기능이 모두있는 장치를 구별 할 수 없기 때문에 불충분합니다.

보다 정확한 솔루션은 CSS4 미디어 상호 작용 기능을 활용하는 것입니다. 이러한 기능을 통해 개발자는 마우스 또는 터치 스크린과 같은 포인팅 장치의 존재와 정확성을 쿼리 할 수 ​​있습니다. 다음 옵션은 사용할 수 있습니다 :

@media (포인터 : 거친) {...} // 제한된 정확도 포인팅 장치 @Media (포인터 : Fine) {...} // 정확한 포인팅 장치 @Media (포인터 : 없음) {... ...} // 포인팅 장치 없음

@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device

@media (호버 : 호버) {...} // 호버 할 수 있습니다. @Media (호버 : 없음) {...} // 호버를 호버 할 수 없음

@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device

@media (모든 호버 : 호버) {...} // 모든 입력 장치는 호버링 할 수 있습니다. @Media (one-hover : none) {...} // 입력 장치는

@media (any-hover: hover) { ... } // Any input device can hover
@media (any-hover: none) { ... } // No input device can hover

if(window.matchMedia("(any-hover: none)").matches) {
    // Touch-only device
}

또한 마우스 입력 부족은 키보드 전용 장치의 존재를 나타낼 수 있음을 고려하는 것이 중요합니다. CSS4 미디어 상호 작용 기능은 두 유형의 입력 한계를 효과적으로 감지 할 수 있습니다.