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

Question

Hoy (o hace muy poco) 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 era porque una clase se estaba añadiendo al elemento de cuerpo que normalmente sólo se pone puso en su lugar si hay apoyo evento táctil que puedo comprobar de esta manera:

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

y, efectivamente, 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 MouseEvents también se dispara.

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

Answer 1

Probar:

'ontouchstart' in document.documentElement 

Answer 2

No es que es probable que no quiere cambiar el comportamiento sólo porque un navegador compatible con tacto '. 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é quiere saber:

1. ¿Quiere saber si usted va a conseguir touchstart/touchmove/touchend eventos: Realmente no hay manera de saber esto avance seguro. 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. Quiere 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. Quiere saber si debe ajustar su interfaz de usuario para que sea más amigable con la entrada táctil Por ejemplo, tal vez algunos botones sean más grandes si es probable que el usuario use el botón táctil. 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 puntero disponible como una sugerencia para hacer el mejor compromiso de interfaz de usuario, entonces hay nuevas preguntas de los medios de CSS que puede utilizar:

   • 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 3

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

Answer 4

fácil, do not. si diseña el sitio correctamente, la única razón válida para probarlo es el de los navegadores no táctiles, particularmente los navegadores más antiguos, no crean errores, y dependiendo de cómo haya implementado los eventos táctiles, puede que ni siquiera sea un problema (simplemente no se dispararán), sin embargo cuando se usa una biblioteca como un martillo.js, es necesario crear una instancia del objeto de martillo, en un navegador antiguo como el IE 8 que se generará un error, fácil manera de evitar esto es simplemente envolver ese código en 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 esto permitirá que todos los demás códigos JavaScript continúen.