the - to view this video please enable javascript and consider upgrading to a web browser that

¿Cómo puedo verificar el soporte táctil real en un navegador?

Question

Hoy (o muy recientemente) Chrome Beta se actualizó a 17 para mí y con él noté algo de funky en mi aplicación web. Me di cuenta de que se debía a que se estaba agregando una clase al elemento del cuerpo que normalmente solo se pone allí si hay soporte para eventos táctiles que compruebo de esta manera:

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

Y por supuesto, puedo crear y activar eventos táctiles en Chrome 17. La primera idea que tuve fue, oh, puedo verificar el tacto, y ver si falla el clic del mouse, por lo tanto, hay un mouse, pero los MouseEvents también se activan.

¿De qué otra manera puedo verificar, sin el rastreo del agente de usuario, que es un dispositivo real y táctil, y no solo un navegador que admite eventos táctiles?

Answer 1

No es probable que no quiera cambiar el comportamiento solo porque un navegador "admita el toque". P.ej. Chrome en Windows ahora admite el toque todo el tiempo, 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.

Así que esto realmente se reduce a por qué quieres saber:

1. Desea saber si va a obtener eventos touchstart / touchmove / touchend: realmente no hay forma de saber esto por adelantado 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 pueden interesar estos eventos, solo debes escucharlos.

2. Desea saber si debe mostrar una versión ''móvil'' de su sitio. Si el usuario tiene soporte táctil no es la señal adecuada para esto, por ejemplo. un usuario de Windows con una pantalla táctil probablemente NO quiere su sitio móvil. Puede usar heurísticos de UserAgent, pero proporcione al usuario una forma segura de cambiar las versiones de su sitio.

3. Desea saber si debe ajustar su UI para que sea más amigable para la entrada táctil. Por ejemplo, tal vez algunos botones sean más grandes si es probable que el usuario use el tacto. En general, puede ser mejor diseñar siempre para múltiples tipos de punteros: después de todo, no tiene manera de conocer la preferencia del puntero del usuario cuando tienen tanto el tacto como el mouse. Pero si realmente desea utilizar el conocimiento del hardware de puntero disponible como una pista para hacer la mejor compensación de interfaz de usuario, entonces hay nuevas consultas de medios de CSS que puede usar:

   • http://dev.w3.org/csswg/mediaqueries4/#pointer
   • http://dev.w3.org/csswg/mediaqueries4/#hover

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

Answer 2

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

Answer 3

fácil, no lo hagas Si diseñas el sitio correctamente, la única razón válida para probarlo son los navegadores no táctiles, particularmente los navegadores más antiguos, no crean errores, y dependiendo de cómo hayas implementado los eventos táctiles, eso puede no ser un problema ( simplemente no se dispararán), sin embargo cuando se utiliza una biblioteca como hammer.js, es necesario crear una instancia del objeto martillo, en un navegador más antiguo como IE 8 que lanzará un error, una forma fácil de esto es simplemente envolver ese código en las declaraciones try y 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 este caso, permitirá que continúen todos los demás códigos JavaScript.

Answer 4

Tratar:

''ontouchstart'' in document.documentElement