Problema con meta "viewport"

difalonso · #1 (**permalink**) 10/10/2013, 05:23

Hola buenas a todos.

Me hablaron de esta etiqueta que lo que hace es reescalar las webs a las resoluciones moviles, pero ami no me funciona del todo bien. No veo lo que hago mal.

Simplemente, como prueba, mi web es de la siguiente manera:

Cita:

El tamaño de la imagen es de 1280x853 (exactamente la pantalla de mi firefox). En PC se ve perfecta, pero en movil se ve fatal. Tengo un iphone5, por cierto.

Gracias por su ayuda!

pzin · #2 (**permalink**) 12/10/2013, 05:22

Con eso sólo ajustas el viewport, no escalas la web.

Si quieres que la imagen se ajuste siempre al ancho máximo del navegador puedes hacer algo así:

Código CSS:

Ver originalimg {
  max-width: 100%;
}

difalonso · #3 (**permalink**) 14/10/2013, 03:59

Cita:

Iniciado por pzin

Con eso sólo ajustas el viewport, no escalas la web.

Si quieres que la imagen se ajuste siempre al ancho máximo del navegador puedes hacer algo así:

Código CSS:

Ver originalimg {
  max-width: 100%;
}

Muchas gracias por tu respuesta.

Con lo cual, si pusiera:

Código CSS:

Ver originalbody {
  max-width: 100%;
}

se supone que se me ajustaria la web entera??

un saludo

pzin · #4 (**permalink**) 14/10/2013, 05:16

Cita:

Iniciado por difalonso

Con lo cual, si pusiera:

Código CSS:

Ver originalbody {
  max-width: 100%;
}

se supone que se me ajustaria la web entera??

De hecho lo del ancho máximo para body se lo estás indicando con la meta-etiqueta viewport. Ya que indicas prácticamente que el navegador tenga el mismo ancho que el dispositivo, y usualmente body suele medir lo mismo que el navegador, porque no se suele tocar.

Así que seguramente no se adapte la web entera. Tendría que ser un diseño líquido, y, seguramente quedaría bastante mal, porque aunque sea un sitio líquido, tendría que adaptarse de una forma diferente a resoluciones más pequeñas. Y para eso precisamente están pensadas las media-queries.

difalonso · #5 (**permalink**) 14/10/2013, 05:28

Cita:

Iniciado por pzin

De hecho lo del ancho máximo para body se lo estás indicando con la meta-etiqueta viewport. Ya que indicas prácticamente que el navegador tenga el mismo ancho que el dispositivo, y usualmente body suele medir lo mismo que el navegador, porque no se suele tocar.

Así que seguramente no se adapte la web entera. Tendría que ser un diseño líquido, y, seguramente quedaría bastante mal, porque aunque sea un sitio líquido, tendría que adaptarse de una forma diferente a resoluciones más pequeñas. Y para eso precisamente están pensadas las media-queries.

Eso me temia.

La cosa es que la web es pelin compleja, y en un principio estaba pensado que solo se utilizara en Escritorio. Y ahora me piden que la adapte a movil y tablet. Y queria saber si habia alguna forma mas automatica que las media querys.

Gracias de todas formas

pzin · #6 (**permalink**) 14/10/2013, 05:33

Cita:

Iniciado por difalonso

Y queria saber si habia alguna forma mas automatica que las media querys.

No la hay. El problema es que CSS no hace magia.

Si tienes una web líquida que en la versión de escritorio tiene cuatro bloques horizontales al 25% de su ancho, seguramente en un móvil ese tendrá que ocupar el 50 o el 100% del ancho, para que o bien se vería un algo de 2x2 o bien vertical del todo.

Si no haces nada y lo dejas tal cual, entonces igual aplicarle un ancho al contenedor, o un ancho mínimo. Así se vería igual que en el escritorio. Pero entonces no apliques la meta-etiqueta del viewport, para que este sea según el contenido y se pueda hacer zoom.

Pero vamos, un diseño responsivo siempre va a quedar mejor, ya no para el cliente, sino para los usuarios del sitio. Cuesta más trabajo, pero también se paga más, porque estás más horas desarrollándolo.