Consultas de medios css: apunte a dispositivos móviles sin especificar el ancho, la proporción de píxeles, etc.

Question

Supongamos que solo quiero orientar los anuncios a todas las tabletas y teléfonos, independientemente del tamaño, ¿hay alguna consulta de medios para esto?¿Es posible hacer esto sin especificar un tamaño?¿O es usar un tamaño la única forma de orientar la publicidad a dispositivos móviles y no a computadoras de escritorio?

Answer 1

En la especificación CSS3 , se menciona @media handeld, pero tal vez no sea compatible con el navegador.

Entonces, no.

Sin embargo, este sitio puede resultarle útil, explica otras consultas de medios.técnicas para dispositivos móviles.

Answer 2

He estado luchando con esto durante unos días, pero una buena forma de verificar los dispositivos de mano es el ancho máximo del dispositivo.Las computadoras de escritorio no envían esto al navegador, pero la mayoría (si no todas) las computadoras de mano lo usan.

En mi caso, quería mostrar una versión comprimida del sitio en todos los dispositivos (incluido el escritorio) cuando estaba por debajo de un cierto ancho, para lo cual usé

@media all and (max-width: 640px)

Pero cierta ventana emergente superpuesta que usaba position: fixed tuvo que cambiarse solo en dispositivos portátiles (porque la propiedad css funciona en todos los navegadores de escritorio pero no en todos los dispositivos portátiles).Entonces, para eso usé una regla adicional:

@media all and (max-device-width: 640px)

En el que me dirijo a todas las computadoras de mano por debajo de 640 pero no a los navegadores de escritorioPor cierto, esto tampoco apunta a iPads (que es como lo quería) porque tiene un ancho de dispositivo superior a 640 px.

Si solo desea orientar sus anuncios a todos los dispositivos, elija un ancho mínimo bajo (1 px) para que no excluya ningún dispositivo independientemente del ancho.

Answer 3

No creo que tenga demasiada suerte con un enfoque CSS puro.Querrá hacer algo similar al enfoque modernizer.js y nosotros JS para detectar el dispositivo y agregar un nombre de clase al cuerpo basado en eso.

Cuál es la mejor manerapara detectar un dispositivo móvil en jQuery?

Luego, incluya esa clase en sus consultas de medios para casos especiales de dispositivos móviles de diferentes tamaños.