css - pantallas - Consulta de medios para detectar si el dispositivo es pantalla táctil

responsive design css ejemplos

Question

¿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 utilizar una solución de JavaScript como !window.Touch o Modernizr?

Answer 1

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

Entonces, aquí está la consulta de medios entre navegadores:

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

Answer 2

En realidad, hay una consulta de medios para eso:

@media (hover: none) { … }

Además de Firefox, es bastante compatible . Safari y Chrome son los navegadores más comunes en dispositivos móviles, podría ser suficiente hasta una mayor adopción.

Answer 3

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

La característica de medios ''puntero'' se utiliza para consultar sobre la presencia y la 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 tiene los siguientes valores:

''ninguna''
- 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.

''multa''
- 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

Answer 4

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 corporal si el dispositivo tiene una pantalla táctil. Ahora, cualquier ubicación en su aplicación web donde tenga css para: hover puede llamar a body: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 modernizador ya que el modernizador lib es una biblioteca muy grande. Si todo lo que intenta hacer es detectar pantallas táctiles, esto será mejor cuando el tamaño de la fuente compilada final sea un requisito.

Answer 5

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

1. Nick Zakas explica que Modernizr aplica una clase de CSS no-touch cuando el navegador no admite el toque.

2. O detecte en JavaScript con una simple pieza de código, 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 {
       ...
   }

Answer 6

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 de manera consistente 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>

Answer 7

Sugiero usar modernizr y usar 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 clase como, por ejemplo, en Firefox. Puede usar :-moz-system-metric(touch-enabled) . Pero estas características no están disponibles para todas las browswers.

Para dispositivos Apple , puede usarlo de forma sencilla:

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

Especialmente para Ipad

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

Pero estos no funcionan en Android .

Modernizr brinda 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.

Styling Touch Elements

Modernizer agrega clases a la etiqueta html para este propósito exacto. En este caso, touch y no-touch para que pueda darle un toque de estilo a sus aspectos táctiles prefijando sus selectores con .touch. por ejemplo, .touch .your-container . ^{Créditos: Ben Swinburne}

Answer 8

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