Quel est le meilleur moyen de détecter un écran tactile de l'appareil " à l'aide de JavaScript?
J'ai écrit un plug-in jQuery c'est pour une utilisation sur des ordinateurs de bureau et les appareils mobiles. Je me demandais si il existe un moyen avec JavaScript pour détecter si le périphérique dispose d'écran tactile de capacité. Je suis à l'aide d'jquery-mobile.js pour détecter l'écran tactile événements et elle fonctionne sur iOS, Android, etc., mais j'aimerais aussi écrire des instructions conditionnelles selon que l'utilisateur de l'appareil dispose d'un écran tactile.
Est-ce possible?
- c'est la meilleure façon var x = 'évènements touchstart' dans le document.documentElement; console.log(x) // retourne true si est pris en charge // else return false
- Pourquoi est-ce fil protégé si de nouvelles techniques sont encore émergents?
Vous devez vous connecter pour publier un commentaire.
Mise à jour: Veuillez lire blmstr 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 tout le site.
Il suffit d'ajouter des classes à l'élément html pour chaque fonctionnalité.
Ensuite, vous pouvez cibler ces caractéristiques facilement en CSS et JS. Par exemple:
Et Javascript (jQuery exemple):
Modernizr.touch
inattendue renvoieundefined
, vous pourriez avoir un personnalisé Modernizr (vous obtenez de choisir), sans support pour Toucher de détection d'Événement.Avez-vous essayé d'utiliser cette fonction? (C'est le même que Modernizr l'habitude d'utiliser.)
Mise à JOUR de 1
document.createEvent("TouchEvent")
ont commencé à revenirtrue
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:
Mise à JOUR 2
J'ai trouvé que le ci-dessus ne fonctionnait pas sur IE10 (retour faux sur MS Surface). Voici le corrigé:
Mise à JOUR 3
'onmsgesturechange' in window
sera de retour vrai dans certains IE versions de bureau donc c'est pas fiable. Cela fonctionne un peu plus fiable:Mise à JOUR 2018
Le temps passe et il y a de nouvelles et de meilleures façons de tester ça. J'ai essentiellement extraites et simplifiée de Modernizr façon de le vérifier:
Ici, ils sont à l'aide de la non-standard
touch-enabled
médias de fonction de requête, ce qui je pense est un peu bizarre et les mauvaises pratiques. Mais bon, dans le monde réel, je suppose que cela fonctionne. Dans le futur (quand ils sont pris en charge par tous ces médias fonctionnalités de requête pourrait vous donner les mêmes résultats:pointer
ethover
.Découvrez la source de la façon dont Modernizr le font.
Pour un bon article qui explique les problèmes avec détection tactile, voir:
Stu Cox: Vous ne Pouvez pas Détecter un écran Tactile.
true
oufalse
. Vous pouvez en lire plus à ce sujet ici: stackoverflow.com/questions/4686583/...in
opérateur déjà renvoie une valeur de type boolean.'onmsgesturechange'
est l'évaluation vrai même dans les pays non-tactile dispositifs (PC).window.navigator.msMaxTouchPoints
semble être plus précise. Trouvé ici.ontouchstart
ontouchend
etontouchmove
autant que je sache.!!window.navigator.msMaxTouchPoints
??||
opérateur ne force pas un booléen. Elle renvoie la valeur/le résultat de la deuxième opérande si le premier prend la valeur faux-ish. Considérer:var x = false || 3; // x: 3
. Accordé, Javascript avec précision virages le résultat demsMaxTouchPoints
à un résultat correct, mais si un booléen est souhaitée, il faut double-niée:!!navigator.msMaxTouchPoints
, ou évalué> 0
. Cela dit, votre commentaire original de présentation de cette solution a été très utile. 🙂('ontouchstart' in window)
incorrectement retourne true en cas de BlackBerry 9300.(navigator.msMaxTouchPoints > 0)
renvoie incorrectement faux sur l'iPod Touchnavigator.msMaxTouchPoints > 0
afin d'ajouter la détection de IE11. Devraient travailler dans IE10 ainsi.function is_touch_device() { if (window.ontouchstart) { return true; } if (window.onmsgesturechange) { return true; } };
'ontouchstart' in window
comme vrai. Cela peut être un Chrome bug.Que Modernizr ne détecte pas IE10 sous Windows Phone 8/WinRT, une simple croix-navigateur solution est:
Vous avez uniquement besoin de vérifier une fois que le dispositif n'est pas soudain, l'appui ou non de support tactile, il suffit donc de le stocker dans une variable de sorte que vous pouvez l'utiliser plusieurs fois de manière plus efficace.
return !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);
(à combiner à la fois des réponses) Fonctionne très bien dans IE10 ainsi!'onmsgesturechange' in window
retourne true en cas de IE10 bureau, même lorsque le contact est possiblefunction isTouchDevice() { return 'ontouchstart' in window || !!(navigator.msMaxTouchPoints);}
!!('ontouchstart' in window || navigator.msMaxTouchPoints)
À 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 google Chrome), la Playbook de Blackberry, iPhone 4s, Windows Phone 8, c'est à dire 10, IE 8, IE 10 (Windows 8 avec écran Tactile), Opera, Chrome et Firefox.
Actuellement, il échoue sur Windows Phone 7 et je n'ai pas été en mesure de trouver une solution pour que le navigateur encore.
Espère que quelqu'un trouve cela utile.
true
sur mon Firefox 32 sur windows 7 🙁J'aime celui-ci:
function isTouchDevice(){ return (window.ontouchstart !== undefined); }
var isTouch = 'ontouchstart' in window;
, cependant cela ne fonctionne pas avec la dernière version de Chrome(v31),var isTouch = 'createTouch' in window.document;
est encore à travailler.touchstart
de ne pas tenir compte de la Surface de contact de l'appareil, car IE utilisepointer
les événements de la place.Si vous utilisez Modernizr, il est très facile à utiliser
Modernizr.touch
comme mentionné plus haut.Cependant, je préfère utiliser une combinaison de
Modernizr.touch
et de l'agent utilisateur de test, juste pour être sûr.Si vous n'utilisez pas de Modernizr, vous pouvez simplement remplacer le
Modernizr.touch
fonction ci-dessus avec('ontouchstart' in document.documentElement)
Notez également que les tests de dépistage de l'agent utilisateur
iemobile
vous donnera plus large gamme de détection de Microsoft d'appareils mobiles queWindows Phone
.Voir aussi cette SORTE de question
/(iphone|ipod|ipad|android|iemobile|blackberry|bada)/.test(window.navigator.userAgent.toLowerCase())
Nous avons essayé de la modernizr mise en œuvre, mais la détection de la touche événements n'est pas cohérente plus (IE 10 a touch événements sur le bureau de windows, c'est à dire 11 fonctionne, parce que l'ai baissé les événements tactiles et ajout de pointeur de l'api).
Nous avons donc décidé d'optimiser le site web de contact du site, tant que nous ne savons pas ce type de saisie de l'utilisateur. Ce qui est plus fiable que toute autre solution.
Nos recherches dire, que la plupart des utilisateurs d'ordinateurs de bureau déplacer avec la souris sur l'écran avant de cliquer, de sorte que nous pouvons les détecter et de changer les comportements avant qu'ils ne soient en mesure de cliquer ou passez la souris n'importe quoi.
C'est une version simplifiée de notre code:
overflow:auto
de sorte qu'il pourrait être affichés par le toucher, mais pas de barres de défilement apparaît. il existe de nombreux exemples qui vous avez juste à savoir quel type de périphérique de l'utilisateur a..il est fou, les navigateurs ne pas exposer cette information. actuellement, la meilleure façon est de renifler l'agent utilisateur. c'est le plus relaTravail De Violon
J'ai réalisé, comme ça,
Il y a quelque chose de mieux que de vérifier s'ils ont un écran tactile, est de vérifier si elles sont en l'utilisant, en plus c'est plus facile à vérifier.
Celui-ci fonctionne bien, même à la Surface des Fenêtres tablettes !!!
Depuis l'introduction de interaction fonctionnalités de médias vous ne pouvez tout simplement faire:
https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer
(pointer: coarse)
que vous êtes le plus susceptible seulement de ciblage de l'entrée principale. Peut être utilisé dans de production, depuis les quelques adverses; sont les navigateurs de bureau seulement. Il y a un excellent article sur ce sur css-tricks.J'ai utilisé des morceaux de code ci-dessus pour détecter si le toucher, pour ma fancybox iframes ne serait sur les ordinateurs de bureau et pas sur la touche. J'ai remarqué que Opera Mini pour Android 4.0 était encore en vous inscrivant en tant que non-tactile de l'appareil lors de l'utilisation de blmstr du code seul. (Quelqu'un sait pourquoi?)
J'ai fini par utiliser:
/iPhone|iPod|iPad|Android|BlackBerry/
?La plus grande "chasse aux sorcières" avec en essayant de détecter le toucher est sur les dispositifs hybrides qui soutiennent à la fois tactile et le pavé tactile ou de la souris. Même si vous êtes en mesure de détecter correctement si l'appareil prend en charge les toucher, ce que vous avez vraiment besoin de faire est de détecter quel périphérique d'entrée de l'utilisateur est actuellement à l'aide. Il y a une détaillé écrire jusqu'à ce défi et une solution possible ici.
Fondamentalement l'approche pour déterminer si un utilisateur a juste touché à l'écran ou utilisé une souris/pavé tactile au lieu d'enregistrer à la fois une
touchstart
etmouseover
de l'événement sur la page:Une touche agir à la fois de ces événements, bien que l'ancien (
touchstart
) toujours le premier sur la plupart des appareils. Ainsi compter sur cette séquence prévisible des événements, vous pouvez créer un mécanisme dynamique qui ajoute ou supprime uncan-touch
classe à la racine du document afin de refléter la actuel type d'entrée de l'utilisateur en ce moment sur le document:Plus de détails ici.
Découvrez ce post, il donne un très beau fragment de code pour les appareils tactiles sont détectés ou que faire si des évènements touchstart événement est appelé:
Je voudrais éviter d'utiliser la largeur de l'écran pour déterminer si un périphérique est un périphérique tactile. Il y a des écrans tactiles beaucoup plus grande que 699px, pensez à Windows 8. Navigatior.userAgent peut être sympa pour remplacer faux postives.
Je voudrais vous recommandons de vérifier ce problème sur Modernizr.
Êtes-vous désireux de vérifier si l'appareil prend en charge les événements tactiles ou est un périphérique tactile. Malheureusement, ce n'est pas la même chose.
Non, il n'est pas possible. Les excellentes réponses données ne sont jamais que partiel, car toute méthode permettra de produire des faux positifs et des faux négatifs. Même le navigateur ne sait pas toujours si l'écran tactile est présent, grâce à l'Api du système d'exploitation, et le fait de changer au cours d'une session de navigation, en particulier avec KVM type d'arrangements.
Voir plus de détails dans cet excellent article:
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
L'article suggère de reconsidérer les hypothèses que vous voulez détecter les écrans tactiles, ils sont probablement faux. (J'ai vérifié moi-même pour mon application, et mes hypothèses étaient en effet mal!)
L'article conclut:
Il ressemble à Chrome 24 maintenant en charge les événements tactiles, probablement pour Windows 8. Donc le code posté ici ne fonctionne plus. Au lieu d'essayer de détecter si le toucher est pris en charge par le navigateur, je suis maintenant de liaison à la fois le toucher et cliquez sur les événements et de s'assurer que l'on est appelé:
Puis en l'appelant:
Espérons que cette aide !
Beaucoup de ces travaux, mais nécessite jQuery, javascript, les linters de se plaindre à propos de la syntaxe. Compte tenu de votre question initiale demande un "JavaScript" (pas de jQuery, pas Modernizr) pour résoudre ce problème, ici, est une fonction simple qui fonctionne à chaque fois. C'est aussi comme un minimum que vous pouvez obtenir.
Un dernier avantage que je vais mentionner est que ce code est cadre et agnostique appareil. Profitez-en!
ou
serait une vérification plus poussée, je suppose.
ua
se réfère ànavigator.userAgent
. Aussi la détection par la largeur de l'écran peut donner un faux résultat si quelqu'un ouvre un navigateur à ne pas en mode plein écran.J'utilise:
en jQuery mobile 1.0.1
Tous les navigateurs pris en charge à l'exception de Firefox pour ordinateur de bureau toujours VRAI à cause de Firefox pour ordinateur de bureau de support de responsive design pour les développeurs même si vous cliquez sur Tactile Bouton ou pas!
J'espère que Mozilla va corriger cela dans la prochaine version.
J'utilise Firefox 28 de bureau.
true
🙁J'ai aussi eu beaucoup de mal avec les différentes options sur la façon de détecter en Javascript si la page est affichée sur un dispositif à écran tactile ou pas.
OMI, dès à présent, aucune autre option existe pour détecter l'option correctement.
Les navigateurs des rapports sur les événements tactiles sur des machines de bureau (parce que l'OS peut-être toucher), ou certaines solutions ne fonctionnent pas sur tous les appareils mobiles.
En fin de compte, j'ai réalisé que j'étais en suivant l'approche erronée dès le départ:
Si ma page est pour ressembler au toucher et non-touch, j'ai peut-être ne devriez pas avoir à vous soucier de la détection de la propriété:
Mon scénario était de désactiver les info-bulles sur les boutons sur les appareils tactiles qu'ils mènent à l'appuie deux fois où j'ai voulu, d'une simple touche pour activer le bouton.
Ma solution a été de refactoriser la vue, de sorte qu'aucune bulle d'aide était nécessaire sur un bouton, et à la fin je n'ai pas besoin de détecter le contact de l'appareil à partir de Javascript avec les méthodes de tous leurs inconvénients.
Vous pouvez installer moderniste et l'utilisation d'un simple toucher de l'événement. C'est très efficace et fonctionne sur tous les appareils que j'ai testé, y compris windows surface!
J'ai créé un jsFiddle
Pratique, la réponse semble être celui qui considère le contexte:
1) site Public (pas de login)
Le Code de l'INTERFACE utilisateur de travailler avec les deux options.
2) connectez-vous site
Capture de savoir si une souris-déplacer eu lieu sur le formulaire de connexion, et de l'enregistrer dans un caché d'entrée. La valeur est transmise avec les identifiants de connexion et ajouté à l'utilisateur de session, de sorte qu'il peut être utilisé pour toute la durée de la session.
Jquery pour ajouter à la page de connexion uniquement:
(+1 pour @Dave Burt et +1 pour @Martin Lantzsch sur leurs réponses)
jQuery v1.11.3
Il y a beaucoup de bonnes informations dans les réponses fournies. Mais, récemment, j'ai passé beaucoup de temps à tenter de lier tout ensemble dans une solution de travail pour l'accomplissement de deux choses l'une:
En plus de ce post et La détection des appareils à écran tactile avec Javascript, j'ai trouvé ce post par Patrick Lauke extrêmement utile: https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
Voici le code...
Important! Le
*.on( events [, selector ] [, data ], handler )
méthode doit avoir un sélecteur, généralement un élément, qui peut gérer les "évènements touchstart" de l'événement, ou de toute autre comme événement associé à la touche. Dans ce cas, c'est l'élément de lien hypertexte "un".Maintenant, vous n'avez pas besoin de gérer l'ordinaire de la souris en cliquant dans le JavaScript, car vous pouvez utiliser les CSS pour gérer ces événements à l'aide de sélecteurs pour le lien hypertexte "un" élément comme suit:
Remarque: Il existe d'autres sélecteurs ainsi...
Le problème
En raison de dispositifs hybrides qui utilisent une combinaison de touche et entrée de la souris, vous devez être en mesure dynamiquement changement de l'état /de la variable qui détermine si un morceau de code doit s'exécuter si l'utilisateur est un utilisateur tactile ou pas.
Tactile des appareils d'incendie
mousemove
sur le robinet.Solution
touchstart
événement est déclenché, puis attribuez la valeur true.Testé sur Safari iOS et google Chrome pour Android.
Note: pas sûr à 100% sur le pointeur-événements pour MS Surface, etc.
Codepen démo
Mesure jQuery
support
objet:Et maintenant vous pouvez le vérifier n'importe où, comme ceci:
Cela semble bien fonctionner pour moi pour l'instant:
Note rapide pour ceux qui pourraient être tentés d'écrire
window.ontouchstart !== undefined
--> veuillez utiliser micnic réponse, commeundefined
n'est pas un mot clé dans le JavaScript. Gros Problème si développer écrit quelque chose comme:Développeur peut faire pas défini ce qu'ils veulent, et vous pouvez ainsi vérifier si
window.ontouchstart = myNonExistingWord;
Pas de manque de respect à ceux qui ont donné cette réponse: assez sûr que je l'ai écrit dans mon code aussi 😉
undefined
est immuable depuis ES5 (2009).Lorsqu'une souris est connectée, on peut supposer avec assez élevé hitrate (je dirais practially 100%) que l'utilisateur déplace la souris au moins un petit peu de distance après la page est prête, sans cliquer. Le mécanisme ci-dessous le détecte. Si détecté, je considère cela comme un signe de manque de support de toucher ou, si la prise en charge, d'importance mineure lorsqu'une souris est en cours d'utilisation. Tactile de l'appareil est prise en compte si non détecté.
MODIFIER Cette approche peut ne pas convenir à tous les usages. Il peut être utilisé pour contrôler la fonctionnalité est activée, basé sur l'interaction de l'utilisateur sur la page chargée, par exemple une visionneuse d'image. Le code ci-dessous permettra également de laisser de l'événement mousemove lié sur les appareils sans souris comme il est maintenant. D'autres approches peuvent être mieux.
En gros, il va comme ceci (désolé pour jQuery, mais semblable en pur Javascript):
Vous pouvez utiliser le code suivant:
Source: La détection tactile de navigation et @mplungjan post.
La solution ci-dessus est basé sur la détection de prise en charge des événements sans browser sniffing article.
Vous pouvez vérifier les résultats à l' page de test.
Veuillez noter que le code ci-dessus teste seulement si le navigateur supporte les toucher, ne pas l'appareil. Donc, si vous avez un ordinateur portable avec écran tactile, votre navigateur peut ne pas avoir le soutien pour les événements tactiles. Le récente de Chrome prend en charge les événements tactiles, mais de navigateur et d'autres ne peuvent pas.
Vous pouvez également essayer:
mais il peut ne pas fonctionner sur les appareils iPhone.
Amusez-vous !
c'est tellement simple si vous tester évènements touchstart est pris en charge dans le document.documentElement
JS:
Bien que ce n'est qu'en alpha, le framework jquery mobile vaut la peine de vérifier. Il permettra de normaliser ces types d'événements à travers les navigateurs mobiles. Peut-être voir ce qu'ils font. Je suis en supposant que jquery-mobile.js est quelque chose de différent de ce cadre.
cette façons fonctionne pour moi, il attendre pour la première interaction avec l'utilisateur pour s'assurer qu'ils sont sur les appareils tactiles