Come posso verificare l'effettivo supporto touch su un browser

Question

Oggi (o molto recentemente) Chrome Beta aggiornato a 17 per me e con esso ho notato un po 'di funkiness nella mia app web. Ho notato che era a causa di una classe veniva aggiunto l'elemento del corpo che normalmente solo viene messo lì se v'è il supporto evento di tocco che verifico come questo:

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

E infatti, posso creare e attivare eventi di tocco su Chrome 17. La prima idea che ho avuto è stata, oh, posso controllare il tocco, e vedere se un clic del mouse non riesce, quindi, c'è un mouse, ma anche MouseEvents.

In quale altro modo è possibile controllare, senza l'uso di user-agent, che si tratta di un dispositivo reale, tangibile, e non solo di un browser che supporta gli eventi di tocco.

Answer 1

Prova:

'ontouchstart' in document.documentElement 

Answer 2

Non che probabilmente non si vuole cambiare il comportamento solo perché un browser 'supporta touch'. Per esempio. Chrome su Windows ora supporta sempre il tocco, anche se non ci sarà necessariamente un touch screen collegato. Anche se c'è un touch screen collegato, l'utente non lo usa necessariamente, quindi devi stare attento a ciò che cambi.

Quindi questa tratta veramente basso per il motivo per cui si vuole sapere:

1. vuoi sapere se si sta andando ad ottenere TouchStart/touchmove/touchend eventi: Non c'è davvero nessun modo per saperlo in anticipo di sicuro. Per esempio. l'utente può inserire un touch screen dopo che la pagina è stata caricata. Se potresti essere interessato a questi eventi, dovresti semplicemente ascoltarli.

2. Vuoi sapere se dovresti visualizzare una versione "mobile" del tuo sito Se l'utente non ha il touch support non è il segnale giusto per questo - es. probabilmente un utente Windows con touchscreen NON desidera il tuo sito mobile. Puoi utilizzare UserAgent heurstics, ma per favore concedi all'utente un modo appiccicoso per cambiare versione del tuo sito.

3. Si desidera sapere se è necessario modificare l'interfaccia utente per essere più intuitivi per l'input tattile Ad esempio, alcuni pulsanti potrebbero essere più grandi se è probabile che l'utente utilizzi il tocco. In generale, potrebbe essere preferibile progettare sempre più tipi di puntatore: dopo tutto non si ha modo di conoscere la preferenza del puntatore dell'utente quando hanno sia touch che mouse. Ma se davvero si vuole utilizzare la conoscenza dell'hardware puntatore disponibile come un suggerimento per fare il miglior compromesso interfaccia utente, quindi ci sono nuovi media query CSS è possibile utilizzare:

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

Ho aggiunto supporto parziale a Chrome per questi in Chrome 21 (crbug.com/123062). Per quanto ne so, nessun altro browser li supporta ancora.

Answer 3

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

Answer 4

facile, no. se si progetta il sito correttamente, l'unico motivo valido per testarlo è che i browser non touch, in particolare i browser meno recenti, non generano errori e, a seconda di come sono stati implementati gli eventi touch, potrebbe non essere nemmeno un problema (semplicemente non sparano), tuttavia quando si utilizza una libreria come il martello.js, è necessario creare un'istanza dell'oggetto martello, in un browser più vecchio come IE 8 che genera un errore, modo semplice intorno a questo è quella di avvolgere solo che il codice in istruzioni try e 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' 
} 

a questo consentirà a tutti gli altri codici JavaScript di continuare.