Quelle est la meilleure façon de détecter un périphérique «écran tactile» en utilisant JavaScript?

Question

J'ai écrit un plug-in jQuery à utiliser sur les ordinateurs de bureau et les appareils mobiles. Je me demandais s'il y a un moyen avec JavaScript pour détecter si l'appareil a une capacité d'écran tactile. J'utilise jquery-mobile.js pour détecter les événements de l'écran tactile et cela fonctionne sur iOS, Android, etc., mais j'aimerais aussi écrire des instructions conditionnelles selon que l'appareil de l'utilisateur a un écran tactile.

Est-ce possible?

Answer 1

Avez-vous essayé d'utiliser cette fonction? (C'est le même que Modernizr utilisation)

function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}

Mise à JOUR:

document.createEvent("TouchEvent") ont commencé à regagner true dans le dernier chrome (v. 17). Modernizr mis à jour il ya un moment. Vérifier Modernizr test ici.

Mise à jour de votre fonction comme ceci pour le faire fonctionner:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

Mise à JOUR:

J'ai trouvé que le ci-dessus ne fonctionnait pas sur IE10 (retour faux sur MS Surface). Voici le corrigé:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
};

Mise à JOUR:

'onmsgesturechange' in window renverra vrai dans certains IE versions de bureau donc c'est pas fiable. Modernizr ont mis à jour leurs tests. Je pense que cet article explique quelques problèmes.

Answer 2

Mise à jour: Veuillez lire blmstr la réponse ci-dessous avant de tirer toute une fonctionnalité de détection de la bibliothèque dans votre projet. La détection de réelle prise en charge tactile est plus complexe, et Modernizr ne porte que sur une base de cas d'utilisation.

Modernizr est un grand, moyen léger pour faire toutes sortes de détection de fonctionnalité sur un site.

Il ajoute simplement des classes à l'élément html pour chaque fonctionnalité.

Ensuite, vous pouvez cibler ces caractéristiques facilement en CSS et JS. Par exemple:

html.touch div {
    width: 480px;
}

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

Et Javascript (jQuery exemple):

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

Answer 3

Comme Modernizr ne détecte pas IE10 sur Windows Phone 8/WinRT, une solution simple et multi-navigateurs est :

Vous devez toujours vérifier une fois que l’appareil ne sera pas soudainement de soutenir ou ne prend pas en charge touch, il suffit donc de le stocker dans une variable pour vous pouvez d’utiliser plusieurs fois plus efficacement.

Answer 4

À l’aide de tous les commentaires ci-dessus j’ai assemblé le code suivant qui fonctionne pour mes besoins :

J’ai testé sur iPad, Android (navigateur et Chrome), Blackberry Playbook, iPhone 4 s, Windows Phone 8, IE 10, IE 8, IE 10 (Windows 8 avec écran tactile), Opera, Chrome et Firefox.

Actuellement, il ne parvient pas sur Windows Phone 7 et je n’ai pas été en mesure de trouver une solution pour que le navigateur encore.

Espérons que quelqu'un trouve cela utile.

Answer 5

J'aime celui la:

 function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

alert(isTouchDevice());