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
Con shrink-to-fit=no
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.