¿Cómo puedo comprobar el soporte táctil real en un browser?

Hoy (o muy recientemente) Chrome Beta se actualizó a 17 para mí y con él noté algo de funkiness en mi aplicación web. Me di count de que era porque se estaba agregando una class al elemento del cuerpo que normalmente solo se pone allí si hay soporte de events táctiles que verifico así:

try { document.createEvent("TouchEvent"); _device.touch = true; } catch (e) { _device.touch = false; } 

Y, por supuesto, puedo crear y activar events táctiles en Chrome 17. La primera idea que tuve fue, oh, puedo comprobar si hay contacto y ver si falla el clic del mouse, por lo tanto, hay un mouse, pero también MouseEvents desencadena.

De lo contrario, puedo verificar, sin que el agente de usuario pueda detectar, que es un dispositivo real, táctil, y no solo un browser que admita events táctiles.

Tratar:

 'ontouchstart' in document.documentElement 

No es probable que no quieras cambiar el comportamiento solo porque un browser 'admite tocar'. P.ej. Chrome en Windows ahora admite el tacto todo el time, aunque no necesariamente habrá una pantalla táctil conectada. Incluso si hay una pantalla táctil conectada, el usuario no necesariamente la usa, por lo que debe tener cuidado con lo que cambia.

Entonces, esto realmente se debe a por qué quieres saber:

  1. Desea saber si va a tener events touchstart / touchmove / touchend: Realmente no hay manera de saber esto de antemano con certeza. P.ej. el usuario podría conectar una pantalla táctil después de que su página se haya cargado. Si te interesan estos events, solo debes escucharlos.

  2. Desea saber si debe mostrar una versión 'mobile' de su sitio. Si el usuario tiene o no soporte táctil no es la señal correcta para esto, por ejemplo. un usuario de Windows con pantalla táctil probablemente NO desee su sitio mobile. Puedes usar UserAgent heurstics, pero por favor, dale al usuario una forma fácil de cambiar las versiones de tu sitio.

  3. Desea saber si debe ajustar su interfaz de usuario para que sea más amigable para la input táctil. Por ejemplo, tal vez algunos botones deberían ser más grandes si es probable que el usuario use toque. En general, puede ser mejor diseñar siempre para múltiples types de pointers, después de todo, no tiene forma de saber cuál es la preference del puntero del usuario cuando tienen tanto el toque como el mouse. Pero si realmente desea utilizar el conocimiento del hardware puntero disponible como sugerencia para lograr la mejor compensación de UI, entonces hay nuevas consultas de medios CSS que puede usar:

Agregué soporte parcial a Chrome para estos en Chrome 21 (crbug.com/123062). Hasta donde sé, ningún otro browser los admite todavía.

 ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch 

fácil, no lo haga si diseñas el sitio correctamente, la única razón válida para probarlo es que los browseres no táctiles, en particular los browseres más antiguos, no arrojen errores y, dependiendo de cómo hayas implementado events táctiles, puede que ni siquiera sea un problema ( simplemente no se disparan); sin embargo, cuando se utiliza una biblioteca como hammer.js, debe crear una instancia del object Hammer, en un browser anterior como IE 8, que arrojará un error; de manera sencilla, esto es simplemente envolver ese código en las declaraciones try and catch:

 try { var Hammer = new HAMMER(); } catch (err) { 'do what ever or do nothing, does not support touch or won't work at least anyway' } 

en esto, esto permitirá que todo el rest del código JavaScript continúe.