0

No entiendo meta name="viewport". Estoy usando el ejemplo que ofrece w3Schools y no soy capaz de entender para qué sirve, qué es lo que hace exactamente. He leído la explicación y entiendo perfectamente que dice que sirve para configurar el ancho de la página al ancho del dispositivo width=device-width, y el nivel de zoom cuando la página se carga por primera vez initial-scale=1.0, pero no consigo ver su efecto. Me explico...

Usando, como digo, el ejemplo que ofrece w3Schools, veo en su código, en el que está hecho con meta name="viewport", que además de esta etiqueta meta le han incluido un código CSS que es el que realmente genera el efecto que se supone que hace el viewport. El código CSS es:

<style>
img {
max-width:100%;
height:auto;
}
</style>

Si nosotros comentamos la línea max-width:100%perdemos el efecto que se supone que realiza el viewport. Por este motivo no termino de entender para qué sirve realmente el viewport.

2
  • Si pruebas ese ejemplo en un movil verás la diferencia, o puedes probarlo en el modo dispositivo (Device Mode) en la herramientas de desarrollador de Chrome
    – user7176
    Commented el 27 jun. 2016 a las 6:39
  • Ya he probado en el móvil y no termino de verlo. Sigo indagando.
    – Hugo
    Commented el 28 jun. 2016 a las 13:35

1 respuesta 1

3

Antes que nada quiero sugerirte que NO uses w3Schools, existen muchos medios donde esto se explica con mucho detalle, aunque puede que ya se hayan solucionado la mayoría de sus "problemas":

La mejor fuente (al parecer) hoy por hoy es Mozilla Developer Network.


Teniendo en cuenta que ya entiendes para que sirve el viewport, vamos a ir a la práctica:

Si no incluyes width=device-width, le estás permitiendo al navegador usar un ancho arbitrario, definido por el fabricante del navegador, en muchos casos es 980 o 1024 píxeles, aquí no hay un valor correcto o incorrecto, simplemente los creadores de los navegadores asignan un valor. A partir de ahí, los navegadores hacen un zoom automático para que los 980px (el ancho del documento) quepan en la pantalla actual (en caso que sea un dispositivo con ancho inferior a 980px).

Aquí puedes ver más información al respecto del ancho por defecto:


Si no incluyes initial-scale=1, puedes tener problemas de tamaño (zoom) de los elementos de la página al cambiar de orientación (en un dispositivo móvil), mientras al incluirlo se mantiene el zoom de los elementos en ambas orientaciones. También evita que la página cargue con un zoom (1.5, 2.0, etc.= asignado por la misma o por algún bug.

Podríamos decir que no usar este parámetro es "menos grave" que dejar de usar el anterior.

En el siguiente enlace puedes ver una demo al respecto:


Puedes "probar" o ver tu ancho y zoom actual (según el navegador): http://www.quirksmode.org/mobile/metaviewport/defaults.html

1
  • Muchas gracias. Voy a revisar toda la información que me das y cuando lo tenga más claro te contestaré más detenidamente. Gracias nuevamente
    – Hugo
    Commented el 28 jun. 2016 a las 13:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.