Pagina responsive carga con zoom

[Benderzuelo]

Hola amigos/as

estoy un poco verde en el tema responsive, la cuestión es que he hecho una página de promoción en responsive y se adapta a todos los tamaños bien, el problema es que cuando la cargo desde un teléfono, sale ya con zoom como si lo hubieramos hecho, se lo quitamos a mano y se ve perfecta pero nada mas cargar ya lleva zoom, estoy usando esta META, no se si estará bien o no...

Código HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">
 

Muchas gracias por adelantado.

[pzin]

¿Quieres que tenga zoom o no? Puedes quitárselo con user-scalable=no también especificando un valor máximo:

Código HTML:

<meta name="viewport" content="width=device-width, user-scalable=no">
 

Código HTML:

<meta name="viewport" content="width=device-width, maximum-scale=1">
 

O todo junto:

Código HTML:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
 

http://dev.w3.org/csswg/css-device-a...eta-properties

Cuando publiques código, usa la opción highlight.

[Benderzuelo]

Hola pzin, muchas gracias por la info,

creo que no me he explicado bien, me da igual que tenga o no zoom, lo que quiero es que nada más cargar la pagina ya que es respònsive que se quede adaptada a pantalla, o sea... sin zoom, pero por lo que sea ya viene con un poco de zoom y lo que tengo que hac er es quitárselo para uqe se adapte.

Me dijeron que podría ser por la etiqueta que he puesto.

[pzin]

Preguntaba si querías zoom o no no porque no te haya entendido, si no porque dependiendo de si quieres o no puedes hacer una cosa u otra.

Así que te valen cualquier de las dos (tres) opciones que te puse ahí y debería de funcionar. En caso de no hacerlo tal vez se deba a algún problema de caché.

[Benderzuelo]

OK. voy a probar a ver

[Benderzuelo]

Sigue sin funcionar...

te paso la url a ver si estoy haciendo algo mal...

Código HTML:

http://www.manomanitas.es/promociones
 

[pzin]

El problema no es ese entonces; el zoom está bien. Si el viewport te mide lo mismo que el ancho del dispositivo, entonces si tienes una página que mide 1200 píxeles ¿cómo se supone que se tiene que ver?

El problema es que no tienes hecho un diseño líquido que se adapte al ancho del navegador. Como digo el zoom es correcto, está a 1, lo que falla es el ancho de la página, que es más grande que el viewport (área visible).

[Benderzuelo]

Pero pzin, he hecho todas las querys en css desde 1200 hasta 550, es más, si pongo el inspector de elementos y empiezo a reducir el ancho de la pantalla como va marcando el ancho y alto se ve perfectamente como cambia a cada ancho establecido y el ancho que se carga en el móvil tiene otro diseño que es todo en línea, ese diseño es el de 767 px de ancho y es el que se ve al cargar en el móvil, que puede estar pasando entonces?

[pzin]

Pues lo tienes mal hecho, porque yo al reducir el navegador a 400 píxeles, el elemento #wrapper100 se mantiene en unos espléndidos 767 píxeles.

[Benderzuelo]

Bueno, ahora mirare eso, pero aun asi, en un móvil con 767 px debería verse bien o no?

[pzin]

Iniciado por Benderzuelo

Bueno, ahora mirare eso, pero aun asi, en un móvil con 767 px debería verse bien o no?

Creo que si. Pero en cambio en un móvil con 678 píxeles no, porque está mal puesto.

Lo mejor es que no apliques a ese #wrapper100 ningún ancho, para que así —como es un elemento de bloque— ocupe siempre el ancho total disponible.

El uso de media-queries ahí lo veo forzado. No hay necesidad de usarlos. El diseño responsivo se basa primero en un diseño líquido y luego se hacen ciertos ajustes con media-queries.

Voy a mover el tema al foro de CSS, que creo que está mejor ubicado por ahí.

[Derzz]

ah mi parecer tiene muchas query.. con 3 basta y tiene 5.. al redimensionar el navegador se ve las 5 query y es anti estetico reducelo asi..
*Escritorio y tablet(≥1200px)
*tablet y smartphone(en horizontal)(≥992px)
*y el ultimo query solo para moviles(≥768px)

[Derzz]

no lo vi, pero en el ultimo query ponle width 100% al wrapper100
para qe se adapte

[pzin]

Iniciado por Derzz

ah mi parecer tiene muchas query.. con 3 basta y tiene 5.. al redimensionar el navegador se ve las 5 query y es anti estetico reducelo asi..
*Escritorio y tablet(≥1200px)
*tablet y smartphone(en horizontal)(≥992px)
*y el ultimo query solo para moviles(≥768px)

¿Qué tiene que ver que se «vean las query»? Que de todas formas, ningún usuario se pasa el día redimensionando el navegador; de hecho no lo hace ni un (buen) desarrollador.

Además, no hay nada escrito ni nada cierto sobre si es mejor tener más o menos breakpoints. De hecho dependerá siempre del diseño del sitio.