3

La pregunta consta básicamente de lo que ven en el titulo, y he visto dicho atributo en muchas plantillas y trabajos últimamente...

¿Alguien me puede decir para qué funciona? Aparte de eso ¿cuál es la mejor manera de escribir esta meta etiqueta con sus atributos? ¡Gracias!

1
  • Te recomendaría que separases la pregunta en dos: por una parte shrink-to-fit, y por otra la meta etiqueta del viewport. Aunque esta segunda pregunta puede ser demasiado genérica y casi te recomendaría que leyeses la página de MDN sobre viewport y luego hacer una pregunta más concreta.
    – Alvaro Montoro
    Commented el 20 mar. 2017 a las 4:36

1 respuesta 1

1

Esto es una traducción (adaptada) de la respuesta aceptada para una pregunta similar que hay en el sitio en inglés. Si esta respuesta te sirve, acéptala y visita la respuesta original para darle un voto positivo.


"shrink-to-fit=no" es algo específico de Safari, al menos al momento de escribir esta respuesta, y se introdujo como parte de Safari 9.0. Citando la sección "¿Qué hay nuevo en Safari?" de la documentación para Safari 9.0:

Cambios en el Viewport

Los meta tags Viewport que usan "width=device-width" causarán que la página se escale (hacia abajo) para ajustarse a los contenidos que sobresalen de los límites del viewport. Puedes anular este comportamiento añadiendo "shrink-to-fit=no" a tu meta tag como se muestra más abajo. El valor añadido prevendrá que la página se escale para ajustarse al viewport.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Resumiendo, añadir eso al meta tag (o meta-etiqueta) del viewport hará que se restablezca el comportamiento de las versiones anteriores a Safari 9.0.


Ejemplo

Aquí dejo un ejemplo visual que muestra la diferencia después de cargar la página con ambas configuraciones.

La sección en rojo es el ancho del viewport y la sección azul está posicionada fuera del viewport inicial (e.g. left: 100vw). Puedes ver como en el primer ejemplo la página tiene zoom para ajustarse cuando shrink-to-fit=no se omite (por tanto mostrando el contenido que hay fuera del viewport), y la zona azul se mantiene fuera de la pantalla en el segundo ejemplo.

El código de este ejemplo se puede encontrar en este Codepen.

Sin especificar shrink-to-fit

Sin shrink-to-fit=no

Con shrink-to-fit=no

Con shrink-to-fit=no

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.