CSS 미디어 쿼리를 사용하여 터치스크린이 아닌 장치를 어떻게 감지할 수 있습니까?

미디어 쿼리로 터치스크린이 아닌 장치 감지

CSS 미디어 쿼리는 다양한 장치 특성에 따라 웹사이트 스타일을 조정하는 편리한 방법을 제공합니다. 장치가 미디어 쿼리에 의해 직접 지원되지 않는 터치스크린인지 여부를 결정하는 동안 이 문제를 해결하는 새로운 미디어 기능이 있습니다.

CSS4 '포인터' 미디어 기능

CSS4 미디어 쿼리 초안에는 장치에 있는 포인팅 장치의 존재 여부와 정확성을 쿼리하는 '포인터' 미디어 기능입니다. 이 기능은 다음 값을 갖습니다.

• 'none': 사용할 수 있는 포인팅 장치가 없습니다.
• 'coarse': A 정확도가 제한된 포인팅 장치를 사용할 수 있습니다.
• '괜찮음': A 매우 정확한 포인팅 장치를 사용할 수 있습니다.

'포인터' 미디어 기능 사용

'포인터' 미디어 기능은 터치스크린이 아닌 장치를 대상으로 다음과 같이 사용할 수 있습니다.

@media (pointer:coarse) {
    /* CSS styles for non-touchscreen devices */
}

브라우저 호환성

'포인터' 미디어 기능은 현재 일부 브라우저에서 지원되지만, 호환성은 다양합니다. 브라우저 호환성에 대한 최신 정보는 Quirksmode를 참조하세요.

대체 JavaScript 솔루션

'포인터' 미디어 기능을 사용하여 장치별 스타일을 구현할 수 없는 경우 JavaScript 솔루션 사용을 고려해 보세요. 일반적인 접근 방식은 다음과 같습니다.

• !window.Touch: 터치스크린이 없음을 감지합니다.
• Modernizr: 터치스크린을 포함한 기능 감지 도구 감지.

결론

'포인터' 미디어 기능은 CSS 미디어 쿼리에서 터치스크린이 아닌 장치를 감지하는 편리한 방법을 제공합니다. 그러나 아직 개발 중이며 브라우저 지원이 제한되어 있습니다. 대체 JavaScript 기반 솔루션의 경우 !window.Touch 또는 Modernizr을 고려하세요.

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