CSS와 JavaScript를 사용하여 터치스크린을 어떻게 감지할 수 있습니까?

미디어 쿼리로 터치스크린 감지

반응형 웹 디자인 영역에서는 콘텐츠를 다양한 입력 장치에 맞게 조정하는 것이 중요합니다. 장치가 터치스크린인지 확인하면 적절한 조정을 통해 사용자 경험을 향상시킬 수 있습니다.

미디어 쿼리 솔루션

CSS4 미디어 쿼리 초안은 이러한 목적을 위해 특별히 다음과 같은 기능을 제공합니다. '바늘'. 세 가지 값을 제공합니다.

• 없음: 포인팅 장치 없음
• 일반: 정확도가 낮은 포인팅 장치
• 좋음: 정확한 포인팅 기기

사용:

@media (pointer:coarse) {
    /* Adjust styles for low-accuracy pointing devices */
}

호환성:

2013년 1월 22일 기준, 브라우저 호환성 이다 다음:

• Chrome/Win: 지원
• Chrome/iOS: 지원되지 않음
• Safari/iOS6: 지원되지 않음

자바스크립트 대안:

'포인터' 미디어 쿼리는 브라우저 지원이 제한되어 있지만 JavaScript 솔루션은 대안을 제공합니다.

• !window.Touch: 감지 터치 입력
• Modernizr: 다음을 제공하는 라이브러리입니다. 터치스크린 감지를 포함한 다양한 장치 기능

결론:

가능한 경우 '포인터' 미디어 쿼리를 사용하는 것이 터치스크린을 감지하는 가장 정확한 방법입니다. . 그러나 지원되지 않는 장치의 경우 !window.Touch와 같은 JavaScript 솔루션을 효과적으로 사용할 수 있습니다.

위 내용은 CSS와 JavaScript를 사용하여 터치스크린을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!