web-dev-qa-db-fra.com

Détection d'appareils à écran tactile avec Javascript

En Javascript/jQuery, comment puis-je détecter si le périphérique client est équipé d'une souris?

J'ai un site qui glisse un petit panneau d'information lorsque l'utilisateur passe la souris sur un élément. J'utilise jQuery.hoverIntent pour détecter le survol, mais cela ne fonctionne évidemment pas sur les appareils à écran tactile tels que l'iPhone/iPad/Android. Donc, sur ces appareils, j'aimerais revenir à appuyer sur pour afficher le panneau d'informations.

javascriptjqueryiphoneandroid
126
Brad Robinson

+1 pour faire hover et click les deux. Une autre solution consiste à utiliser les requêtes de média CSS et à utiliser certains styles uniquement pour les écrans/appareils mobiles plus petits, qui sont les plus susceptibles d’avoir une fonctionnalité tactile. Ainsi, si vous avez des styles spécifiques via CSS et que jQuery vous permet de vérifier ces éléments pour les propriétés de style de périphérique mobile, vous pouvez les intégrer pour écrire votre code spécifique pour mobile.

Voir ici: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

12
Moin Zaman
var isTouchDevice = 'ontouchstart' in document.documentElement;

Note: Le fait qu'un périphérique prenne en charge les événements tactiles ne signifie pas nécessairement qu'il s'agit exclusivement d'un périphérique à écran tactile. De nombreux appareils (tels que mon Asus Zenbook) prennent en charge les événements de clic et tactiles, même s'ils ne disposent pas de mécanisme de saisie tactile. Lors de la conception pour la prise en charge tactile, incluez toujours la prise en charge des événements clic et ne supposez jamais qu'un périphérique est exclusivement l'un ou l'autre.

265
KevBurnsJr

Les tests trouvés pour window.Touch ne fonctionnaient pas sur Android mais cela fonctionne:

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

Voir l'article: Quel est le meilleur moyen de détecter un appareil à écran tactile avec JavaScript?

19
hallodom
return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

Raison de l'utilisation de maxTouchPoints avec msMaxTouchPoints:

Microsoft a indiqué que, à partir d'Internet Explorer 11, la version à préfixe Microsoft de cette propriété (msMaxTouchPoints) peut être supprimée et recommande l'utilisation de maxTouchPoints à la place.

Source: http://ctrlq.org/code/19616-detect-touch-screen-javascript

8
user
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

Fonctionne partout!

7
Code Spy

Google Chrome semble renvoyer des faux positifs sur celui-ci:

var isTouch = 'ontouchstart' in document.documentElement;

Je suppose que cela a quelque chose à voir avec sa capacité à "émuler les événements tactiles" (F12 -> paramètres dans le coin inférieur droit -> onglet "écrasements" -> dernière case à cocher). Je sais que cette option est désactivée par défaut, mais c’est avec cela que je relie le changement de résultats (la méthode "in" utilisée pour fonctionner dans Chrome). Cependant, cela semble fonctionner, dans la mesure où j'ai testé:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

Tous les navigateurs sur lesquels j'ai exécuté ce code sont dans l'état typeof est "objet" mais je me sens plus certain de savoir que c'est n'importe quoi mais non défini :-)

Testé sur IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome pour iPad 21.0.1180.80 et iPad Safari. Ce serait bien si quelqu'un faisait encore plus de tests et partagé les résultats.

4
Ash

J'utilise:

if(jQuery.support.touch){
    alert('Touch enabled');
}

dans jQuery mobile 1.0.1

4
Mark

Pour mon premier post/commentaire: nous savons tous que le "touchstart" est déclenché avant le clic. Nous savons également que lorsque l'utilisateur ouvrira votre page, il devra: 1) déplacer la souris 2) cliquer sur 3) toucher l'écran (pour le défilement ou ... :))

Essayons quelque chose:

// -> Démarrer: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- Fin: jQuery

Bonne journée!

4
silassare

Ceci est écrit pour un de mes sites et constitue probablement la solution la plus infaillible. D'autant que même Modernizr peut obtenir des faux positifs lors de la détection tactile.

Si vous utilisez jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

ou tout simplement JS ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}
4
Timothy Perez

Un article de blog utile sur le sujet, lié à partir de la source Modernizr pour la détection d'événements tactiles. Conclusion: il n'est pas possible de détecter de manière fiable les appareils à écran tactile à partir de Javascript.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

3
Mike S

J'ai testé le code suivant mentionné ci-dessus dans la discussion

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

fonctionne sur Android Mozilla, Chrome, Opera, Android navigateur par défaut et safari sur iphone ... tous positifs ...

semble solide pour moi :)

3
Prasad

Cela fonctionne pour moi:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
2
Turtletrail

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

Cependant, je préfère utiliser une combinaison de Modernizr.touch et les tests d’agent d’utilisateur, par sécurité.

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 étendue de périphériques mobiles Microsoft détectés que Windows Phone.

Voir aussi ceci SO question

1
Peter-Pan

Dans jQuery Mobile, vous pouvez simplement faire:

$.support.touch

Je ne sais pas pourquoi c'est si peu documenté .. mais c'est sécurisé pour crossbrowser (les 2 dernières versions des navigateurs actuels).

1
OZZIE