Duda sobre trabajo con media queries
Hola muy buenas!
Es la primera vez que escribo por aquí, a ver si empiezo a ser un poco más activo y a ayudar en lo que pueda a la gente del foro :)
Os comento mi duda, normalmente al trabajar con diseño adaptativo, suelo usar unos media queries bastante definidos. Maqueto desde móviles hacia arriba y después uso estos media queries:
- @media screen and (min-width: 480px): Para móviles landscape.
- @media screen and (min-width: 768px): Para tablets portrait.
- @media screen and (min-width: 1024px): Para tablets landscape.
- @media screen and (min-width: 1280px): Para escritorio.
El problema le tengo en que 1280 es una resolución que pilla entre media de las tablets con mucha resolución y los ordenadores con poca y claro, no es solo que se vea más pequeño en tablet si no que también el uso en un dispositivo móvil es diferente al de un ordenador.
Había pensado en controlar con JS el tipo de dispositivo que entra a la web, pero me parece demasiado complejo.
¿Vosotros cómo trabajáis con esto? Es un problema que empieza ser recurrente en mis trabajos y no sé si hay alguna forma sencilla de manejarlo.
¡Mil gracias!
ricardpanades
Buenas,
Te comento un poco lo que se me viene a la cabeza así rápido, a ver si sirve de algo o no XD
De primeras así sin usar nada de JS para detectar el dispositivo puedes intentar jugar con el pixel device ratio, la orientación y incluso con el max-height. Con eso deberías poder diferenciar bastante cuando es tablet y cuando es desktop.
Aquí un link de CSS-Tricks donde salen dispositivos más comunes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Otra opción viable y que creo que es una buena forma es utilizar em's en vez de px's para las media queries. Tengo un proyecto de grid en SASS en el que lo he probado un poco y creo que es una buena practica el intentar utilizar em's ya que es mucho más adaptable que los px's.
Te paso el link de mi grid por si quieres hecharle un ojo (hay algunas cosas a medias pero para probar cosillas va bien): https://github.com/ricardpanades/Calcifer.io
Lo último es lo que comentas, mirar con JS el navigator.userAgent. Con eso puedes poner una class en el body por ejemplo y si desarrollas con SASS es muy simple hacer estilos dependiendo de que clase tengas en el body.
Bueno, no se si te he ayudado en algo o lo he liado todo aún más, espero que lo primero XD
Cualquier cosilla aquí estamos para ayudar en lo que se pueda.
Un saludo ;)
dvmota
¡Muchas gracias por la respuesta!
Pues probaré todas las opciones que me has dado a ver si con eso me vale, la única que he probado y no me gustó mucho (quizás porque no lo hice bien) es la del device-ratio u orientation, ya que en algunos dispositivos si tenía un formulario, al aparecer el teclado en pantalla la orientación pasaba de ser portrait a landscape y eso trastocaba bastante jeje.
Voy a probar el resto en cuanto tenga ocasión y pongo aquí como ha salido la cosa.
Mil gracias :)
vektorama
No se si te servirá (creo que voy tarde) pero yo cuando maqueto lo intento poner todo en rem y % así me olvido de casi todos los mediaQuerys... solo necesitas los esenciales, los px en diseño/maquetación responsive (que no es lo mismo que adaptative) son el diablo!!!!