Media query per rilevare se il dispositivo è touchscreen

Qual è il modo più sicuro, utilizzando le media query, per far accadere qualcosa quando non si è su un dispositivo touchscreen? Se non è possibile, suggerisci di utilizzare una soluzione JavaScript come !window.Toucho Modernizr?

Suggerirei di utilizzare modernizr e di utilizzare 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, utilizzando CSS, ci sono pseudo classi come, ad esempio, in Firefox. Puoi usare : -moz-system-metric (abilitato al tocco) . Ma queste funzionalità non sono disponibili per tutti i browser.

Per i dispositivi Apple , puoi usare semplicemente:

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

Soprattutto per Ipad:

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

Ma questi non funzionano su Android .

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

Styling Touch Elements

Modernizer aggiunge classi al tag HTML per questo scopo esatto. In questo caso, touche no-touchin modo da poter stile tuoi aspetti legati tocco anteponendo i vostri selettori con .touch. es .touch .your-container. ^{Crediti: Ben Swinburne}

In realtà c'è una proprietà per questo nella bozza di media query CSS4 .

La funzione multimediale "puntatore" viene utilizzata per interrogare la presenza e l'accuratezza di un dispositivo di puntamento come un mouse. Se un dispositivo dispone di più meccanismi di input, si consiglia che l'UA riporti le caratteristiche del dispositivo di puntamento meno capace dei meccanismi di input primari. Questa media query assume i seguenti valori:

'none'
- Il meccanismo di input del dispositivo non include un dispositivo di puntamento.

"grossolano"
- Il meccanismo di input del dispositivo include un dispositivo di puntamento di precisione limitata.

'fine'
- Il meccanismo di input del dispositivo include un dispositivo di puntamento accurato.

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 anche trovato un biglietto 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: funziona
• Chrome / iOS: non funziona
• Safari / iOS6: non funziona

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

1. Nicholas Zakas spiega che Modernizr applica una no-touchclasse CSS quando il browser non supporta il tocco.

2. Oppure rileva in JavaScript con un semplice pezzo di codice, permettendoti di implementare la tua soluzione simile a Modernizr:

   <script>
       document.documentElement.className += 
       (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
   </script>

   Quindi puoi scrivere il tuo CSS come:

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

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

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

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

Non è necessario utilizzare Modernizr, puoi semplicemente usare JavaScript semplice:

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("touch is enabled!");
</script>

Nel 2017, la query multimediale CSS dalla seconda risposta non funziona ancora su Firefox. Ho trovato una soluzione per questo: -moz-touch-enabled

Quindi, ecco la media query cross-browser:

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

In realtà c'è una media query per questo:

@media (hover: none) { … }

Oltre a Firefox, è abbastanza ben supportato . Essendo Safari e Chrome i browser più comuni sui dispositivi mobili, potrebbe bastare fino a una maggiore adozione.

Questo funzionerà. Se non me lo fa sapere

@media (hover: none) and (pointer: coarse) {
    /* Touch screen device style goes here */
}

modifica: il passaggio del mouse su richiesta non è più supportato

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

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;

modo più nuovo:

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

Il codice sopra aggiungerà la classe "is-touch" al tag del corpo se il dispositivo ha un touch screen. Ora qualsiasi posizione nella tua applicazione web dove avresti css per: hover puoi chiamarebody: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 di modernizer poiché la libreria di modernizer è una libreria molto grande. Se tutto ciò che stai cercando di fare è rilevare i touch screen, sarà la cosa migliore quando la dimensione della sorgente compilata finale è un requisito.

l'aggiunta di un touchscreen di classe al corpo utilizzando JS o jQuery

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

Sono stato in grado di risolvere questo problema utilizzando questo

@media (hover:none), (hover:on-demand) { 
Your class or ID{
attributes
}    
}