브라우저 미디어 쿼리를 사용하여 터치 장치를 감지하는 방법

이 기사에서는 화면 크기 확인이나 사용자 에이전트 스니핑과 같은 신뢰할 수 없는 기술을 넘어 웹 개발에서 사용자 입력 장치(터치, 마우스, 스타일러스)를 감지하는 신뢰할 수 있는 방법을 탐구합니다. 정확한 장치 기능 감지를 위해 CSS 미디어 쿼리, 특히 pointer, hover 및 any-pointer를 활용하는 데 중점을 두고 있습니다. 이러한 쿼리는 입력 양식에 대한 정확한 정보를 제공하여 더 쉽게 접근할 수 있고 응답성이 뛰어난 웹 애플리케이션을 만듭니다.

간단한 접근 방식이 편리해 보일 수도 있지만 결과가 부정확한 경우가 많습니다. 예를 들어, 사용자가 마우스를 스마트폰에 연결하면 크기 기반 가정이 무효화됩니다. CSS 미디어 쿼리는 실제 장치 특성을 기반으로 정확한 데이터를 제공하는 우수한 솔루션을 제공합니다.

CSS 미디어 쿼리: 신뢰할 수 있는 접근 방식

이 기사에서는 pointer 및 hover 미디어 쿼리를 자세히 살펴보고 React 후크로 구현하는 방법을 보여줍니다.

pointer 미디어 쿼리

pointer 미디어 쿼리는 포인팅 장치의 존재 여부와 정밀도를 확인합니다. 세 가지 값 중 하나를 반환합니다.

• none: 포인팅 장치를 사용할 수 없습니다(예: 음성 제어 장치).
• coarse: 포인팅 장치가 있지만 정밀도가 부족합니다(예: 터치스크린의 손가락).
• fine: 고정밀 포인팅 장치(예: 마우스)를 사용할 수 있습니다.

window.matchMedia 메소드를 사용하면 코드 내에서 미디어 쿼리 결과에 편리하게 액세스할 수 있습니다.

useMatchMedia훅

코드 중복을 피하기 위해 미디어 쿼리 결과를 검색하고 추적하는 사용자 정의 useMatchMedia 후크가 생성됩니다. 이 후크는 window.matchMedia을 활용하고 이벤트 리스너를 추가하여 쿼리 일치 상태의 변화를 감지합니다. 정리 기능을 사용하면 구성 요소가 마운트 해제되거나 쿼리가 변경될 때 리스너가 제거됩니다.

export const useMatchMedia = (query: string) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [matches, query]);

  return matches;
};

기본 포인터 기능 감지

usePrimaryPointerQuery 후크는 기본 포인터 유형을 결정합니다. useMatchMedia, none 및 coarse 포인터 유형에 대한 쿼리로 fine을 호출하여 Pointers 열거형

에서 적절한 값을 반환합니다.

import { useMatchMedia } from './useMatchMedia.ts';
import { Pointers } from './types.ts';

export const usePrimaryPointerQuery = () => {
  const isNone = useMatchMedia('(pointer: none)');
  const isCoarse = useMatchMedia('(pointer: coarse)');
  const isFine = useMatchMedia('(pointer: fine)');
  if (isNone) {
    return Pointers.none;
  } else if (isCoarse) {
    return Pointers.coarse;
  } else if (isFine) {
    return Pointers.fine;
  }
};

추가 포인터 기능 감지

기본 포인터는 하나만 존재하지만 기기에는 보조 포인터(예: 블루투스 키보드, 조이스틱)가 있을 수 있습니다. any-pointer 미디어 쿼리는 사용 가능한 포인터의 정밀도를 확인합니다. useAnyPointerQuery 후크는 포인터 유형을 허용하고 동적으로 생성된 쿼리 문자열과 함께 useMatchMedia을 사용합니다.

export const useMatchMedia = (query: string) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [matches, query]);

  return matches;
};

작업 데모

후크를 보여주는 전체 데모를 이용할 수 있습니다.

고급 검색: hover 및 any-hover

hover 및 any-hover 미디어 쿼리는 호버 기능을 확인하여 감지를 더욱 구체화합니다. 이를 pointer 쿼리와 결합하면 보다 정확한 장치 식별이 ​​가능합니다.

Pointer value	Hover value	Device
coarse	none	Modern touch screens
fine	none	Stylus-based devices
coarse	hover	Joystick or TV remote
fine	hover	Mouse

예를 들어 스타일러스를 기본 입력으로 감지하는 경우:

import { useMatchMedia } from './useMatchMedia.ts';
import { Pointers } from './types.ts';

export const usePrimaryPointerQuery = () => {
  const isNone = useMatchMedia('(pointer: none)');
  const isCoarse = useMatchMedia('(pointer: coarse)');
  const isFine = useMatchMedia('(pointer: fine)');
  if (isNone) {
    return Pointers.none;
  } else if (isCoarse) {
    return Pointers.coarse;
  } else if (isFine) {
    return Pointers.fine;
  }
};

이러한 접근 방식은 사용자 입력 장치를 더욱 강력하고 정확하게 감지하여 사용자 경험과 접근성을 향상시킵니다.

위 내용은 브라우저 미디어 쿼리를 사용하여 터치 장치를 감지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!