movil - consultas en medios css: dispositivos móviles de destino sin especificar ancho, proporción de píxeles, etc.
responsive design (3)
Digamos que solo quiero apuntar a todas las tabletas y teléfonos, sin importar el tamaño, ¿hay alguna 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?
En la especificación CSS3 , se menciona @media handeld pero quizás no tiene soporte para el navegador.
Entonces, no.
Sin embargo, puede encontrar útil este sitio , explica otras técnicas de consulta de medios para dispositivos móviles.
He estado luchando con esto durante 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, quería mostrar una versión comprimida del sitio en todos los dispositivos (incluido el escritorio) cuando estaba debajo de cierto ancho, para lo cual utilicé
@media all and (max-width: 640px)
Pero una cierta ventana emergente de superposición que utilizó 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). Entonces para eso usé una regla adicional:
@media all and (max-device-width: 640px)
En el cual me oriento a todas las computadoras de mano por debajo de 640 pero no a 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 apuntar a 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.
¿Cuál es la mejor forma de detectar un dispositivo móvil en jQuery?
Luego incluya esa clase en sus consultas de medios a dispositivos móviles de casos especiales de diferentes tamaños.