web-dev-qa-db-fra.com

Comment déterminer si le client est un appareil tactile

existe-t-il une méthode ou une astuce agréable et propre pour savoir si l'utilisateur est sur un appareil tactile ou non?

Je sais qu'il y a des trucs comme var isiPad = navigator.userAgent.match(/iPad/i) != null;

mais je me demande simplement s'il y a une astuce pour déterminer généralement si l'utilisateur est sur un appareil tactile? Parce qu'il y a beaucoup plus d'appareils tactiles et de tablettes que d'iPad.

merci.

javascriptjquerytouchtablet
29
matt

Vous pouvez utiliser la fonction JS suivante:

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
   return typeof el.ongesturestart === "function";
}

Source: Détection de la navigation tactile .

Veuillez noter que le code ci-dessus ne teste que si le navigateur prend en charge le tactile, pas l'appareil.

Liens connexes:

Il peut y avoir une détection dans jquery pour mobile et jtouch

28
mplungjan
if ("ontouchstart" in document.documentElement)
{
  alert("It's a touch screen device.");
}
else
{
 alert("Others devices");
}

le code le plus simple que j'ai trouvé après avoir parcouru beaucoup ici et là

14
Pratswinz

Inclure modernizer , qui est une petite bibliothèque de détection de fonctionnalités. Ensuite, vous pouvez utiliser quelque chose comme ci-dessous.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}
13
Gcoop

L'utilisation de document.createEvent("TouchEvent") ne fonctionnera pas sur les appareils de bureau. Vous pouvez donc l'utiliser dans une instruction if.

Notez que cette méthode peut produire des erreurs sur les appareils non tactiles. Je préfère vérifier ontouchstart dans document.documentElement.

4
Julian F. Weinert

Découvrez ceci post , il donne un extrait de code vraiment sympa pour savoir quoi faire lorsque des appareils tactiles sont détectés ou quoi faire si un événement touchstart est appelé:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}
2
Safran Ali

Si vous utilisez Modernizr , il est très facile à utiliser Modernizr.touch comme mentionné précédemment.

Cependant, je préfère utiliser une combinaison de Modernizr.touch et les tests des agents utilisateurs, juste pour être sûr.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|iPod|ipad)/) ||
deviceAgent.match(/(Android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/iPod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Si vous n'utilisez pas Modernizr, vous pouvez simplement remplacer le Modernizr.touch fonction ci-dessus avec ('ontouchstart' in document.documentElement)

Notez également que le test de l'agent utilisateur iemobile vous donnera une gamme plus large d'appareils mobiles Microsoft détectés que Windows Phone.

Voir aussi cette SO question

1
Peter-Pan