So erkennen Sie Touch-Geräte mithilfe von Browser-Medienabfragen

In diesem Artikel werden zuverlässige Methoden zur Erkennung von Benutzereingabegeräten (Touch, Maus, Stift) in der Webentwicklung untersucht, die über unzuverlässige Techniken wie Bildschirmgrößenprüfungen oder User-Agent-Sniffing hinausgehen. Der Schwerpunkt liegt auf der Nutzung von CSS-Medienabfragen, insbesondere pointer, hover und any-pointer, für eine genaue Gerätefähigkeitserkennung. Diese Abfragen liefern genaue Informationen über Eingabemodalitäten und führen zu zugänglicheren und reaktionsschnelleren Webanwendungen.

Obwohl einfachere Ansätze bequem erscheinen mögen, führen sie oft zu ungenauen Ergebnissen. Wenn beispielsweise ein Benutzer eine Maus mit einem Smartphone verbindet, werden größenbasierte Annahmen ungültig. CSS Media Queries bieten eine überlegene Lösung und liefern präzise Daten basierend auf tatsächlichen Geräteeigenschaften.

CSS-Medienabfragen: Ein zuverlässiger Ansatz

Dieser Artikel befasst sich mit pointer und hover Medienabfragen und demonstriert deren Implementierung als React-Hooks.

pointerMedienabfrage

Die pointer Medienabfrage ermittelt das Vorhandensein und die Präzision eines Zeigegeräts. Es gibt einen von drei Werten zurück:

• none: Kein Zeigegerät verfügbar (z. B. sprachgesteuerte Geräte).
• coarse: Ein Zeigegerät ist vorhanden, aber es mangelt an Präzision (z. B. Finger auf einem Touchscreen).
• fine: Ein hochpräzises Zeigegerät ist verfügbar (z. B. Maus).

Die window.matchMedia-Methode bietet bequemen Zugriff auf Medienabfrageergebnisse innerhalb des Codes.

useMatchMediaHaken

Um Coderedundanz zu vermeiden, wird ein benutzerdefinierter useMatchMedia-Hook erstellt, um Medienabfrageergebnisse abzurufen und zu verfolgen. Dieser Hook nutzt window.matchMedia und fügt einen Ereignis-Listener hinzu, um Änderungen im Übereinstimmungsstatus der Abfrage zu erkennen. Eine Bereinigungsfunktion stellt sicher, dass der Listener entfernt wird, wenn die Bereitstellung der Komponente aufgehoben wird oder sich die Abfrage ändert.

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;
};

Erkennung primärer Zeigerfähigkeiten

Der usePrimaryPointerQuery-Hook bestimmt den primären Zeigertyp. Es ruft useMatchMedia mit Abfragen für die Zeigertypen none, coarse und fine auf und gibt den entsprechenden Wert aus einer Pointers-Aufzählung zurück.

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;
  }
};

Erkennen zusätzlicher Zeigerfunktionen

Während nur ein primärer Zeiger vorhanden ist, können Geräte sekundäre Zeiger haben (z. B. Bluetooth-Tastatur, Joystick). Die any-pointer Medienabfrage prüft die Genauigkeit aller verfügbaren Zeiger. Der useAnyPointerQuery-Hook akzeptiert einen Zeigertyp und verwendet useMatchMedia mit einer dynamisch generierten Abfragezeichenfolge.

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;
};

Funktionierende Demo

Eine vollständige Demo mit den Haken ist verfügbar:

Erweiterte Erkennung: hover und any-hover

hover und any-hover Medienabfragen verfeinern die Erkennung weiter, indem sie auf Hover-Funktionen prüfen. Die Kombination mit pointer-Abfragen ermöglicht eine genauere Geräteidentifizierung.

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

Beispiel: Erkennen eines Stifts als primäre Eingabe:

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;
  }
};

Dieser Ansatz gewährleistet eine robustere und genauere Erkennung von Benutzereingabegeräten, was zu einer besseren Benutzererfahrung und Zugänglichkeit führt.

Das obige ist der detaillierte Inhalt vonSo erkennen Sie Touch-Geräte mithilfe von Browser-Medienabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!