Astuce JavaScript : Comment détecter efficacement les appareils à écran tactile ?

Question

J'ai écrit un plugin jQuery pour les ordinateurs de bureau et les appareils mobiles. Je me demande s'il existe un moyen de détecter si un appareil dispose de fonctionnalités d'écran tactile à l'aide de JavaScript. J'utilise jquery-mobile.js pour détecter les événements de l'écran tactile et cela fonctionne sur iOS, Android, etc., mais je souhaite également écrire une instruction conditionnelle selon que l'appareil de l'utilisateur dispose ou non d'un écran tactile.

Est-ce possible ?

Answer 1

Mise à jour 2021

Pour voir les anciennes réponses : consultez l'historique. J'ai décidé de repartir de zéro car cela devenait ingérable lors de la conservation de l'historique dans les publications.

Ma réponse originale disait qu'il était possible d'utiliser les mêmes fonctions que celles utilisées par Modernizr, mais cela n'est plus valable car ils ont supprimé le test "touchevents" dans ce PR : https://github.com/Modernizr/Modernizr/pull/ 2432 , car c'est un sujet déroutant.

Cela dit, cela devrait être un très bon moyen de détecter si un navigateur est « tactile » :

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}

Mais pour des cas d'usage plus poussés, des personnes bien plus intelligentes que moi ont écrit des articles sur ce sujet et je recommande de lire ces articles :

• Stu Cox : Impossible de détecter l'écran tactile
• Détecter le toucher : concentrez-vous sur le « pourquoi », pas sur le « comment »
• Introduction tactile par Patrick H. Lauke

Answer 2

Mise à jour : avant d'intégrer l'intégralité de la bibliothèque de détection de fonctionnalités dans votre projet, veuillez lire la réponse de blmstr ci-dessous, la détection de la prise en charge tactile réelle est plus complexe et Modernizr ne couvre que les cas d'utilisation de base.

Modernizr est un moyen léger de détecter diverses fonctionnalités sur n'importe quel site Web.

Il ajoute simplement des classes dans les éléments HTML pour chaque attribut.

Vous pouvez ensuite facilement cibler ces fonctionnalités en CSS et JS. Par exemple :

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

Et JavaScript (exemple jQuery) :

$('html.touch #popup').hide();