Detectando dispositivos de pantalla táctil con Javascript

En Javascript / jQuery, ¿cómo puedo detectar si el dispositivo del cliente tiene un mouse?

Tengo un sitio que desliza un pequeño panel de información cuando el usuario pasa el mouse sobre un elemento. Estoy usando jQuery.hoverIntent para detectar el vuelo estacionario, pero obviamente no funciona en dispositivos con pantalla táctil como iPhone / iPad / Android. Entonces en esos dispositivos me gustaría volver a presionar para mostrar el panel de información.

+1 para realizar el hover y click ambos. Otra forma podría ser utilizar consultas de medios de CSS y usar algunos styles solo para pantallas / dispositivos mobilees más pequeños, que son los que tienen más probabilidades de tener funcionalidad de tocar / tocar. Por lo tanto, si tiene algunos styles específicos a través de CSS, y desde jQuery, verifique esos elementos para las properties de estilo del dispositivo mobile que podría enganchar en ellos para escribir su código específico para dispositivos mobilees.

Vea aquí: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

 var isTouchDevice = 'ontouchstart' in document.documentElement; 

Nota : El hecho de que un dispositivo admita events táctiles no significa necesariamente que sea exclusivamente un dispositivo de pantalla táctil. Muchos dispositivos (como mi Asus Zenbook) admiten events de clic y toque, incluso cuando no tienen ningún mecanismo de input táctil real. Cuando diseñe para soporte táctil, siempre incluya la compatibilidad de events click y nunca asum que cualquier dispositivo es exclusivamente uno u otro.

Pruebas encontradas para window.Touch no funcionó en Android, pero esto hace:

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

Ver artículo: ¿Cuál es la mejor forma de detectar un dispositivo de 'pantalla táctil' usando JavaScript?

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

¡Funciona en todos lados!

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

Motivo del uso de maxTouchPoints junto con msMaxTouchPoints:

Microsoft ha declarado que, a partir de Internet Explorer 11, la versión prefijada de proveedor de Microsoft de esta propiedad (msMaxTouchPoints) puede eliminarse y recomienda utilizar maxTouchPoints en su lugar.

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

Yo suelo:

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

en jQuery mobile 1.0.1

Google Chrome parece devolver falsos positivos en este caso:

 var isTouch = 'ontouchstart' in document.documentElement; 

Supongo que tiene algo que ver con su capacidad para "emular events táctiles" (F12 -> configuration en la esquina inferior derecha -> pestaña "anulaciones" -> última checkbox). Sé que está desactivado por defecto, pero eso es a lo que conecto el cambio en los resultados con (el método "in" utilizado para trabajar en Chrome). Sin embargo, esto parece estar funcionando, por lo que he probado:

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

Todos los browseres que he ejecutado ese código indican que el typeof es "object", pero me siento más seguro sabiendo que es indefinido 🙂

Probado en IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome para iPad 21.0.1180.80 y iPad Safari. Sería genial si alguien hiciera más testings y compartiera los resultados.

Escribí esto para uno de mis sitios y probablemente sea la solución más infalible. Sobre todo porque incluso Modernizr puede get falsos positivos en la detección táctil.

Si usas jQuery

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

o simplemente JS puro …

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

He probado el siguiente código mencionado anteriormente en la discusión

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

funciona en Android Mozilla, Chrome, Opera, browser pnetworkingeterminado android y safari en iphone … todo positivo …

me parece sólido 🙂

Una útil publicación de blog sobre el tema, vinculada desde dentro de la fuente de Modernizr para detectar events táctiles. Conclusión: no es posible detectar dispositivos de pantalla táctil de manera confiable desde Javascript.

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

Esto funciona para mí:

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

En jQuery Mobile puedes simplemente hacer:

 $.support.touch 

No sé por qué esto está tan indocumentado … pero es seguro para browseres cruzados (las últimas 2 versiones de los browseres actuales).

Para mi primera publicación / comentario: todos sabemos que 'touchstart' se activa antes de hacer clic. También sabemos que cuando el usuario abra su página, él o ella: 1) moverá el mouse 2) click 3) toque la pantalla (para desplazarse, o … :))

Probemos algo:

// -> Inicio: 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'; }); 

// <- End: jQuery

¡Que tengas un buen día!

Para el desarrollo de iPad, estoy usando:

  if (window.Touch) { alert("touchy touchy"); } else { alert("no touchy touchy"); } 

A continuación, puedo vincular de forma selectiva los events basados ​​en el tacto (por ejemplo, ontouchstart) o events basados ​​en el mouse (por ejemplo, onmousedown). Todavía no he probado en Android.

Si usa Modernizr , es muy fácil usar Modernizr.touch como se mencionó anteriormente.

Sin embargo, prefiero usar una combinación de Modernizr.touch y testings de agente de usuario, solo para estar seguro.

 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 no utiliza Modernizr, puede simplemente replace la function Modernizr.touch anterior con ('ontouchstart' in document.documentElement)

También tenga en count que probar el agente de usuario iemobile le dará una gama más amplia de dispositivos mobilees detectados de Microsoft que Windows Phone .

Ver también esta pregunta SO