Consulta de mídia para detectar se o dispositivo é touchscreen

Qual é a maneira mais segura, usando consultas de mídia, de fazer algo acontecer quando não estiver em um dispositivo com tela de toque? Se não houver maneira, você sugere usar uma solução JavaScript como !window.TouchModernizr ou?

Eu sugeriria o uso de modernizr e seus recursos de consulta de mídia.

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

No entanto, usando CSS, existem pseudo classes como, por exemplo, no Firefox. Você pode usar : -moz-system-metric (ativado por toque) . Mas esses recursos não estão disponíveis para todos os navegadores.

Para dispositivos Apple , você pode usar de maneira simples:

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

Especialmente para o Ipad:

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

Mas, eles não funcionam no Android .

O Modernizr oferece recursos de detecção de recursos e a detecção de recursos é uma boa maneira de codificar, em vez de codificar com base em navegadores.

Elementos de toque de estilo

O modernizador adiciona classes à tag HTML para esse fim exato. Nesse caso, touche no-touchpara que você possa estilizar os aspectos relacionados ao toque, prefixe seus seletores com .touch. por exemplo .touch .your-container. ^{Créditos: Ben Swinburne}

Na verdade, existe uma propriedade para isso no rascunho da consulta de mídia CSS4 .

O recurso de mídia 'ponteiro' é usado para consultar a presença e a precisão de um dispositivo apontador, como um mouse. Se um dispositivo tiver vários mecanismos de entrada, é recomendável que o UA relate as características do dispositivo apontador menos capaz dos mecanismos de entrada primários. Esta consulta de mídia aceita os seguintes valores:

'none'
- O mecanismo de entrada do dispositivo não inclui um dispositivo apontador.

'grosso'
- O mecanismo de entrada do dispositivo inclui um dispositivo apontador de precisão limitada.

'fino'
- O mecanismo de entrada do dispositivo inclui um dispositivo apontador preciso.

Isso seria usado como tal:

/* 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;
    }
}

Eu também encontrei um ticket no projeto Chromium relacionado a isso.

A compatibilidade do navegador pode ser testada no Quirksmode . Estes são os meus resultados (22 de janeiro de 2013):

• Chrome / Win: funciona
• Chrome / iOS: não funciona
• Safari / iOS6: não funciona

As soluções CSS não parecem estar amplamente disponíveis em meados de 2013. Em vez de...

1. Nicholas Zakas explica que o Modernizr aplica uma no-touchclasse CSS quando o navegador não suporta o toque.

2. Ou detecte no JavaScript com um simples trecho de código, permitindo implementar sua própria solução Modernizr:

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

   Então você pode escrever seu CSS como:

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

Os tipos de mídia não permitem detectar recursos de toque como parte do padrão:

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

Portanto, não há como fazê-lo de forma consistente por meio de CSS ou consultas de mídia, você precisará recorrer ao JavaScript.

Não é necessário usar o Modernizr, você pode simplesmente usar JavaScript simples:

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

Em 2017, a consulta de mídia CSS da segunda resposta ainda não funciona no Firefox. Encontrei uma solução para isso: -moz-touch-enabled

Então, aqui está a consulta de mídia entre navegadores:

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

Na verdade, existe uma consulta de mídia para isso:

@media (hover: none) { … }

Além do Firefox, é bastante bem suportado . Sendo o Safari e o Chrome os navegadores mais comuns em dispositivos móveis, pode ser suficiente até uma adoção maior.

Isso vai funcionar. Se não me avisar

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

editar: pairar sob demanda não é mais suportado

Esta solução funcionará até que o CSS4 seja globalmente suportado por todos os navegadores. Quando esse dia chegar, use CSS4. mas até então, isso funciona para navegadores atuais.

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())
};

carregando:

à moda antiga:

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

maneira mais recente:

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

O código acima adicionará a classe "is-touch" à etiqueta do corpo, se o dispositivo tiver uma tela de toque. Agora, qualquer local em seu aplicativo da Web onde você teria CSS para: pairar, você pode chamarbody:not(.is-touch) the_rest_of_my_css:hover

por exemplo:

button:hover

torna-se:

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

Esta solução evita o uso do modernizador, pois a biblioteca modernizadora é uma biblioteca muito grande. Se tudo o que você está tentando fazer é detectar telas sensíveis ao toque, será melhor quando o tamanho da fonte compilada final for um requisito.

adicionando uma tela de toque de classe ao corpo usando JS ou jQuery

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

Consegui resolver esse problema usando este

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