Diseño web para moviles
2 seguidores
Buenas,
estoy haciendo mi web adaptada a dispositivos moviles.
El caso es que para que no reescale la web y se pudieran ver mal las imágenes pongo la siguiente linea de meta:
<meta name="viewport" content="width=device-width; user-scalable=no" />
El caso es que usando la misma hoja de estilos y la misma estructura, una página se me ve correctamente pero la otra se me ve "aumentada", como si le hubieran aplicado un zoom.
A alguien le ha pasado esto o sabe cual puede ser la causa.
La estructura es sencilla, un logo, un menu y el contenido. Todo con capas fijadas a un ancho de 320px sin margenes laterales ni padding...
Fran Rosa
Pach, yo la solución que encontré a ese problema fue usando la etiqueta <META> que comentas, pero añadiendo algo más:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
De esa manera siempre se muestra al 100%, y se desactiva la posibilidad de jugar con el zoom.
lfpacheco
Muchas gracias!!
Perfecto, ahora se me ven ambas al mismo tamaño.
Principalmente he visto que la resolucíon a la que se suelen poner las webs para moviles es 320px de ancho!! Lo unico es que yo lo estoy viendo en un galaxy S y se me queda un poco grande a este ancho...mi pregunta es: ajustas el ancho a según qué dispositivo o lo haces a un ancho fijo??
Fran Rosa
Pach, yo todas las pruebas que he hecho han sido con diseños líquidos, esto es, que se adaptan al tamaño de la pantalla.
Para la gente que hace más versiones, 320px y 480px suelen ser las más comunes (smartphone en vertical u horizontal). Aunque claro, hay más móviles además de los smartphones, o el iPhone4 por ejemplo que tiene una resolución de 640px de ancho por 960px de alto (o ancho en horizontal).
Lo más práctico es hacer una versión en una sola columna, de ancho líquido, para todas las versiones para móvil. Pero claro, eso dependiendo de la complejidad de la web, pues tendrás que buscarte la manera, con porcentajes, adaptando el tamaño de las imágenes, etc. Aunque para cosas como botones y demás, con imágenes de fondo y las media queries es bastante sencillo.
Si quieres inspiración (o ver cómo han solucionado otros el tema) tienes Media Queri.es que es una galería de webs que usan precisamente las media queries para adaptar el diseño. Como verás hay de todo, desde gente que crea varias versiones cada una con sus particularidades, a diseños que varían en muy poco y simplemente se adaptan en tamaño.
lfpacheco
Ah, perfecto!!
El principal problema que tenía es que mi web va a tener 2 portfolios, uno de trabajos y otro de fotografias con muchas imágenes y no quería tener todas las imágenes en distintas resoluciones porque sino pesaría demasiado!!
Gracias Fran!!
Fran Rosa
Pach, sobre lo que comentas de las imágenes, es una de las cosas importantes, porque igual que puedes reescalar con CSS las imágenes, tampoco es muy práctico tener imágenes super grandes para descargarlas en la versión para móvil. Una de las opciones al respecto es tener varios tamaños de imagen y cambiarlos según la resolución, por ejemplo con javascript, como hace Andy Chung en su portfolio, o al menos tener un par de versiones: una para móviles (de 480px) y otra más grande para tablets y superiores.
Pero vamos, ésto más que nada por ahorrar ancho de banda si accedes desde un móvil, aunque también dependerá de la navegación. Si por ejemplo se muestra una miniatura de todos los trabajos y solo cargas la imagen completa de los que eliges ver, pues igual te puedes permitir que sea más grande porque no las cargas todas por defecto.
lfpacheco
Si, eso estoy haciendo yo...trabajo con dos tamaños...aún así me está resultando un pelín complicado que quede bien.
Algo que, por cierto, acabo de notar es que con la web normal uso las google fonts y me va perfecto pero en la version para móviles, digamos que me ignora brutalmente...
Pero bueno...ahi andaremos haciendo pruebas y más pruebas...
lfpacheco
Si no te importa Fran te haré otra pregunta....
Estoy probando el diseño en el opera Mini y al apaisar el móvil, en horizontal, el navegador me hace un zoom en la página y las imágenes me las pixela.
He visto otras webs en las que al apaisar el movil no las pixela pero tampoco las carga de nuevo con otra resolución...por lo que parece que hiciera como una especie de reescalado de imágenes. El caso es que he estado buscando por ahí y no encuentro nada...tu sabes algo??
lfpacheco
Olvídalo!! solucionado!! jeje!!