Query multimediale per rilevare se il dispositivo è touchscreen

Qual è il modo più sicuro, utilizzando le query multimediali, per far accadere qualcosa quando non si trova su un dispositivo touchscreen? Se non c’è modo, suggerisci di utilizzare una soluzione JavaScript come !window.Touch o Modernizr?

Suggerirei di usare modernizr e usare le sue funzionalità di media query.

 if (Modernizr.touch){ // bind to touchstart, touchmove, etc and watch `event.streamId` } else { // bind to normal click, mousemove, etc } 

Tuttavia, usando i CSS, ci sono pseudo classi come, ad esempio in Firefox. È ansible utilizzare : -moz-system-metric (touch-enabled) . Ma queste funzionalità non sono disponibili per tutti i browser.

Per i dispositivi Apple , puoi utilizzare semplicemente:

 if(window.TouchEvent) { //..... } 

Soprattutto per Ipad:

 if(window.Touch) { //.... } 

Ma questi non funzionano su Android .

Modernizr offre funzionalità di rilevamento delle funzionalità e il rilevamento di funzionalità è un buon modo per codificare, piuttosto che codificare in base ai browser.

Styling Touch Elements

Modernizer aggiunge classi al tag HTML per questo scopo esatto. In questo caso, touch e no-touch modo da poter modificare gli aspetti relativi al touch anteponendo i selettori con .touch. per esempio .touch .your-container . Crediti: Ben Swinburne

In realtà c’è una proprietà per questo nella bozza della query multimediale CSS4 .

La funzione media “puntatore” viene utilizzata per interrogare sulla presenza e la precisione di un dispositivo di puntamento come un mouse. Se un dispositivo ha più meccanismi di input, si raccomanda che l’UA riporti le caratteristiche del dispositivo di puntamento meno capace dei meccanismi di input primari. Questa query multimediale prende i seguenti valori:

‘nessuna’
– Il meccanismo di input del dispositivo non include un dispositivo di puntamento.

‘grossolano’
– Il meccanismo di input del dispositivo include un dispositivo di puntamento con una precisione limitata.

‘bene’
– Il meccanismo di input del dispositivo include un dispositivo di puntamento preciso.

Questo sarebbe usato come tale:

 /* Make radio buttons and check boxes larger if we have an inaccurate pointing device */ @media (pointer:coarse) { input[type="checkbox"], input[type="radio"] { min-width:30px; min-height:40px; background:transparent; } } 

Ho trovato anche un ticket nel progetto Chromium relativo a questo.

La compatibilità del browser può essere testata su Quirksmode . Questi sono i miei risultati (22 gennaio 2013):

  • Chrome / Win: Works
  • Chrome / iOS: non funziona
  • Safari / iOS6: non funziona

Le soluzioni CSS non sembrano essere ampiamente disponibili a partire dalla metà del 2013. Anziché…

  1. Nick Zakas spiega che Modernizr applica una class CSS no-touch quando il browser non supporta il touch.

  2. Oppure rileva in JavaScript con una semplice porzione di codice, permettendoti di implementare la tua soluzione Modernizr-like:

      

    Quindi puoi scrivere il tuo CSS come:

     .no-touch .myClass { ... } .touch .myClass { ... } 

I tipi di supporto non consentono di rilevare le funzionalità touch come parte dello standard:

http://www.w3.org/TR/css3-mediaqueries/

Quindi, non c’è modo di farlo in modo coerente tramite CSS o query multimediali, dovrai ricorrere a JavaScript.

Non c’è bisogno di usare Modernizr, puoi semplicemente usare un semplice JavaScript:

  

Nel 2017, la query sui supporti CSS della seconda risposta continua a non funzionare su Firefox. Ho trovato un soluton per questo: -moz-touch-enabled


Quindi, ecco la query multimediale cross-browser:

 @media (-moz-touch-enabled: 1), (pointer:coarse) { .something { its: working; } } 

In realtà esiste una query multimediale per questo:

 @media (hover: none) { … } 

Oltre a Firefox, è abbastanza ben supportato . Safari e Chrome sono i browser più comuni sui dispositivi mobili, potrebbe essere sufficiente per un’adozione ancora maggiore.

Questa soluzione funzionerà fino a quando CSS4 non sarà globalmente supportato da tutti i browser. Quando quel giorno arriverà, usa solo CSS4. ma fino ad allora, questo funziona per i browser correnti.

browser util.js

 export const isMobile = { android: () => navigator.userAgent.match(/Android/i), blackberry: () => navigator.userAgent.match(/BlackBerry/i), ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i), opera: () => navigator.userAgent.match(/Opera Mini/i), windows: () => navigator.userAgent.match(/IEMobile/i), any: () => (isMobile.android() || isMobile.blackberry() || isMobile.ios() || isMobile.opera() || isMobile.windows()) }; 

onload:

vecchio modo:

 isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null; 

nuovo modo:

 isMobile.any() ? document.body.classList.add('is-touch') : null; 

Il codice sopra aggiungerà la class “is-touch” al tag body se il dispositivo ha un touch screen. Ora qualsiasi posizione nella tua applicazione web in cui avresti css per: hover puoi chiamare body:not(.is-touch) the_rest_of_my_css:hover

per esempio:

 button:hover 

diventa:

 body:not(.is-touch) button:hover 

Questa soluzione evita l’uso del modernizzatore in quanto la lib di modernizzazione è una libreria molto grande. Se tutto quello che stai cercando di fare è rilevare i touch screen, questo sarà il migliore quando la dimensione della sorgente finale compilata è un requisito.

aggiungere un touchscreen di class al corpo usando JS o jQuery

  //allowing mobile only css var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)); if(isMobile){ jQuery("body").attr("class",'touchscreen'); }