Maison >interface Web >js tutoriel >Comment puis-je détecter de manière fiable les appareils à écran tactile à l'aide de JavaScript ?

Comment puis-je détecter de manière fiable les appareils à écran tactile à l'aide de JavaScript ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-10 00:28:10645parcourir

How Can I Reliably Detect Touchscreen Devices Using JavaScript?

Détection des appareils à écran tactile avec JavaScript : une approche optimisée

Pour une compatibilité multiplateforme, les développeurs sont souvent confrontés au défi de faire la distinction entre les appareils tactiles appareils compatibles et non tactiles utilisant JavaScript. Ceci est crucial pour personnaliser l'expérience utilisateur en fonction des méthodes de saisie de l'appareil.

À l'origine, il a été suggéré que JavaScript pourrait s'appuyer sur le test « touchevents » de Modernizr pour vérifier les capacités de l'écran tactile. Cependant, cette approche n'est plus applicable en raison de la suppression du test de Modernizr.

Une méthode de détection mise à jour

À partir de 2021, un moyen fiable et complet de détecter le toucher -les navigateurs compatibles doivent vérifier les propriétés suivantes :

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}
  • 'ontouchstart' dans la fenêtre vérifie la présence de l'écouteur d'événement touchstart, qui est pris en charge par la plupart des navigateurs tactiles.
  • navigator.maxTouchPoints > 0 vérifie si le navigateur prend en charge les gestes multi-touch.
  • navigator.msMaxTouchPoints > 0 vérifie la même fonctionnalité dans le navigateur Edge de Microsoft.

Lectures complémentaires pour les cas avancés

Pour des scénarios de détection tactile plus complexes, considérez ces ressources :

  • [Vous ne pouvez pas détecter un écran tactile par Stu Cox](https://www.stuartelliscox.com/blog/you-cant-detect-a-touchscreen/)
  • [Détecter le toucher : c'est le "pourquoi", pas le "comment" par Remy Sharp ](https://remysharp.com/2013/04/01/detecting-touch/)
  • [Obtenir présentation délicate de Patrick H. Lauke](https://www.patrickhlauke.com/getting-touchy-with-javascript)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn