Comment détecter les appareils tactiles à l'aide des requêtes multimédias du navigateur

Cet article explore des méthodes fiables pour détecter les périphériques de saisie utilisateur (tactile, souris, stylet) dans le développement Web, allant au-delà des techniques peu fiables telles que la vérification de la taille de l'écran ou le reniflage des agents utilisateurs. L'accent est mis sur l'exploitation des requêtes multimédias CSS, en particulier pointer, hover et any-pointer, pour une détection précise des capacités de l'appareil. Ces requêtes fournissent des informations précises sur les modalités de saisie, conduisant à des applications Web plus accessibles et réactives.

Bien que des approches plus simples puissent sembler pratiques, elles donnent souvent des résultats inexacts. Par exemple, un utilisateur connectant une souris à un smartphone invalide les hypothèses basées sur la taille. Les CSS Media Queries offrent une solution supérieure, fournissant des données précises basées sur les caractéristiques réelles de l'appareil.

Requêtes média CSS : une approche fiable

Cet article se penche sur les requêtes pointer et hover Media, démontrant leur implémentation en tant que hooks React.

pointer Requête multimédia

Le pointer Media Query détermine la présence et la précision d'un périphérique de pointage. Il renvoie l'une des trois valeurs :

• none : Aucun dispositif de pointage disponible (par exemple, appareils à commande vocale).
• coarse : Un dispositif de pointage est présent mais manque de précision (ex. doigt sur un écran tactile).
• fine : Un dispositif de pointage très précis est disponible (par exemple une souris).

La méthode window.matchMedia fournit un accès pratique aux résultats de Media Query dans le code.

useMatchMediaCrochet

Pour éviter la redondance du code, un hook useMatchMedia personnalisé est créé pour récupérer et suivre les résultats de Media Query. Ce hook utilise window.matchMedia et ajoute un écouteur d'événement pour détecter les changements dans l'état de correspondance de la requête. Une fonction de nettoyage garantit que l'écouteur est supprimé lorsque le composant est démonté ou que la requête change.

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

Détection des capacités du pointeur principal

Le hook usePrimaryPointerQuery détermine le type de pointeur principal. Il appelle useMatchMedia avec des requêtes pour les types de pointeurs none, coarse et fine, renvoyant la valeur appropriée à partir d'une énumération 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;
  }
};

Détection de capacités de pointeur supplémentaires

Bien qu'un seul pointeur principal existe, les appareils peuvent avoir des pointeurs secondaires (par exemple, un clavier Bluetooth, un joystick). Le any-pointer Media Query vérifie la précision de tout pointeur disponible. Le hook useAnyPointerQuery accepte un type de pointeur et utilise useMatchMedia avec une chaîne de requête générée dynamiquement.

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

Démo de travail

Une démo complète présentant les hooks est disponible :

Détection avancée : hover et any-hover

Les requêtes

hover et any-hover Media Queries affinent davantage la détection en vérifiant les capacités de survol. Leur combinaison avec pointer requêtes permet une identification plus précise de l'appareil.

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

Par exemple, détecter un stylet comme entrée principale :

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

Cette approche garantit une détection plus robuste et plus précise des périphériques de saisie utilisateur, conduisant à une meilleure expérience utilisateur et une meilleure accessibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!