미디어 쿼리나 JavaScript를 사용하여 터치스크린이 아닌 장치를 어떻게 안정적으로 감지할 수 있습니까?

미디어 쿼리로 터치스크린이 아닌 장치 식별

소개:

장치가 터치스크린을 지원하는지 확인하는 것이 중요합니다. 웹 개발에서 사용자 경험을 향상시키기 위한 것입니다. 미디어 쿼리는 장치 성능에 따라 콘텐츠와 기능을 조정하는 편리한 방법을 제공합니다. 이 기사에서는 터치스크린이 아닌 장치를 감지하는 가장 안전한 미디어 쿼리 기술을 살펴보고 대체 솔루션을 탐색합니다.

미디어 쿼리 솔루션:

CSS4 미디어 쿼리 초안은 혁신적인 마우스와 같은 포인팅 장치의 가용성과 정밀도를 문의하는 '포인터' 기능입니다. 세 가지 가능한 값을 제공합니다.

• none: 포인팅 장치가 없음을 나타냅니다.
• coarse: 정확도가 제한된 포인팅 장치.
• 괜찮음: 정확한 포인팅 장치를 나타냅니다.

이 기능을 사용하면 다음과 같은 미디어 쿼리를 구현할 수 있습니다.

@media (pointer:coarse) {
    /* Code to adjust interface for coarse pointing devices */
}

브라우저 호환성:

2013년 1월 현재 '포인터' 미디어 쿼리는 Windows의 Chrome에서는 지원되지만 iOS나 Safari에서는 지원되지 않습니다. iOS 6.

대체 솔루션: JavaScript

미디어 쿼리가 지원되지 않는 경우 다음과 같은 JavaScript 솔루션을 고려할 수 있습니다.

if (!window.Touch) {
    // Code to handle non-touchscreen scenarios
}

결론:

CSS4의 '포인터' 미디어 쿼리 터치스크린이 아닌 장치를 감지하는 강력한 방법을 제공합니다. 그러나 브라우저 호환성을 고려해야 합니다. 대안으로 '!window.Touch'와 같은 JavaScript 솔루션을 사용하여 동일한 결과를 얻을 수 있습니다.

위 내용은 미디어 쿼리나 JavaScript를 사용하여 터치스크린이 아닌 장치를 어떻게 안정적으로 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!