Consulta de medios para detectar si el dispositivo tiene pantalla táctil

¿Cuál es la forma más segura, utilizando consultas de medios, para hacer que algo suceda cuando no está en un dispositivo con pantalla táctil? Si no hay forma, ¿sugiere usar una solución de JavaScript como !window.Toucho Modernizr?

Sugeriría usar modernizr y sus funciones de consulta de medios.

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

Sin embargo, usando CSS, hay pseudo clases como, por ejemplo, en Firefox. Puede usar : -moz-system-metric (táctil) . Pero estas características no están disponibles para todos los navegadores.

Para dispositivos Apple , puede usar de manera simple:

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

Especialmente para Ipad:

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

Pero, estos no funcionan en Android .

Modernizr ofrece capacidades de detección de características, y la detección de características es una buena forma de codificar, en lugar de codificar en función de los navegadores.

Elementos táctiles de estilo

Modernizer agrega clases a la etiqueta HTML para este propósito exacto. En este caso, touchy no-touchpor lo que puede estilo de su tacto aspectos relacionados con el prefijo sus selectores con .Toque. por ej .touch .your-container. ^{Créditos: Ben Swinburne}

En realidad, hay una propiedad para esto en el borrador de consulta de medios CSS4 .

La función de medios 'puntero' se utiliza para consultar sobre la presencia y precisión de un dispositivo señalador, como un mouse. Si un dispositivo tiene múltiples mecanismos de entrada, se recomienda que el UA informe las características del dispositivo señalador menos capaz de los mecanismos de entrada primarios. Esta consulta de medios toma los siguientes valores:

'ninguno'
: el mecanismo de entrada del dispositivo no incluye un dispositivo señalador.

'grueso'
: el mecanismo de entrada del dispositivo incluye un dispositivo señalador de precisión limitada.

'fino'
: el mecanismo de entrada del dispositivo incluye un dispositivo señalador preciso.

Esto se usaría 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;
    }
}

También encontré un boleto en el proyecto Chromium relacionado con esto.

La compatibilidad del navegador se puede probar en Quirksmode . Estos son mis resultados (22 de enero de 2013):

• Chrome / Win: funciona
• Chrome / iOS: no funciona
• Safari / iOS6: no funciona

Las soluciones CSS no parecen estar ampliamente disponibles a mediados de 2013. En lugar...

1. Nicholas Zakas explica que Modernizr aplica una no-touchclase CSS cuando el navegador no admite el tacto.

2. O detecte en JavaScript con un código simple, lo que le permite implementar su propia solución tipo Modernizr:

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

   Entonces puedes escribir tu CSS como:

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

Los tipos de medios no le permiten detectar capacidades táctiles como parte del estándar:

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

Por lo tanto, no hay forma de hacerlo consistentemente a través de CSS o consultas de medios, tendrá que recurrir a JavaScript.

No es necesario usar Modernizr, solo puede usar JavaScript simple:

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

En 2017, la consulta de medios CSS de la segunda respuesta todavía no funciona en Firefox. Encontré una solución para eso: -moz-touch-enabled

Entonces, aquí hay una consulta multimedia entre navegadores:

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

En realidad, hay una consulta de medios para eso:

@media (hover: none) { … }

Además de Firefox, está bastante bien soportado . Safari y Chrome son los navegadores más comunes en dispositivos móviles, puede ser suficiente hasta una mayor adopción.

Esto funcionará Si no me avisas

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

editar: suspender a pedido ya no es compatible

Esta solución funcionará hasta que CSS4 sea compatible globalmente con todos los navegadores. Cuando llegue ese día solo usa CSS4. pero hasta entonces, esto funciona para los navegadores actuales.

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:

vieja forma:

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

nueva forma:

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

El código anterior agregará la clase "is-touch" a la etiqueta del cuerpo si el dispositivo tiene una pantalla táctil. Ahora, cualquier ubicación en su aplicación web donde tendría CSS para: pase el mouse al que puede llamarbody:not(.is-touch) the_rest_of_my_css:hover

por ejemplo:

button:hover

se convierte en:

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

Esta solución evita el uso de modernizer ya que la lib modernizer es una biblioteca muy grande. Si todo lo que intenta hacer es detectar pantallas táctiles, esto será mejor cuando se requiera el tamaño de la fuente compilada final.

Agregar una pantalla táctil de clase al cuerpo 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');
    }

Pude resolver este problema usando esto

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