Digamos que solo quiero apuntar a todas las tabletas y teléfonos, independientemente de su tamaño, ¿existe una consulta de medios para esto? ¿Es posible hacer esto sin especificar un tamaño? ¿O está utilizando un tamaño como la única forma de orientar los dispositivos móviles, y no los equipos de escritorio?css consultas de medios: segmentar dispositivos móviles sin especificar ancho, proporción de píxeles, etc.
He estado luchando con esto por unos días, pero una buena forma de verificar si hay dispositivos de mano es el ancho máximo del dispositivo. Las PC de escritorio no lo envían al navegador, pero la mayoría (si no todas) las computadoras de mano lo usan.
En mi caso he querido mostrar una versión comprimida del sitio en todos los dispositivos (incluyendo escritorio) cuando esté por debajo de una cierta anchura, para lo cual utilicé
@media all and (max-width: 640px)
Pero un cierto emergente superposición que usa position: fixed tuvo que cambiarse solo en las computadoras de mano (porque la propiedad css funciona en todos los navegadores de escritorio, pero no en todas las computadoras de mano). Así que para que utilicé una regla adicional:
@media all and (max-device-width: 640px)
En qué puedo orientar todos los dispositivos portátiles por debajo de 640, pero no los navegadores de escritorio. Por cierto, esto tampoco apunta a iPads (que es como yo lo quería) porque tiene un ancho de dispositivo más alto que 640px.
Si solo desea orientar todos los dispositivos, solo elija un ancho mínimo mínimo (1px) para que no excluya ningún dispositivo, independientemente del ancho.
No creo que tengas demasiada suerte con un enfoque de css puro. Querrá hacer algo similar al enfoque modernizer.js y a nosotros JS para detectar el dispositivo y anexar un nombre de clase al cuerpo en función de eso.
What is the best way to detect a mobile device in jQuery?
Luego incluyen esa clase en las consultas de los medios de comunicación a los dispositivos móviles de caso especial de diferentes tamaños.
max-device-width es informada por Chrome antes de que cualquiera siga por esta ruta. – eighteyes
Supongo que es nuevo entonces, pero actualizaré mi respuesta. ¡Gracias! –
Tuve que romper mi ambición de consultas de medios solo y usar JS para apuntar ventanas más pequeñas del navegador. – eighteyes