¿Qué hace el atributo meta shrink-to-fit viewport?


Estoy teniendo problemas para encontrar documentación para esto. ¿Es específico de Safari?

Hubo un error reciente en iOS 9 ( aquí), cuya solución es agregar shrink-to-fit=no al meta de la ventana.

¿Qué hace este código?

Author: Dani Springer, 2015-11-18

1 answers

Es específico de Safari, al menos en el momento de escribir esto, siendo introducido en Safari 9.0. De la "¿Qué hay de nuevo en Safari?" documentación para Safari 9.0:

Cambios en la ventana

Las meta etiquetas Viewport que usan "width=device-width" hacen que la página se reduzca para ajustarse al contenido que desborda los límites de la vista. Puede anular este comportamiento agregando "shrink-to-fit=no" a su meta etiqueta como se muestra a continuación. El valor añadido impedirá que la página se ajuste a la ventana.

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

En resumen, agregar esto a la etiqueta meta viewport restaura el comportamiento previo a Safari 9.0.

Ejemplo

Aquí hay un ejemplo visual trabajado que muestra la diferencia al cargar la página en las dos configuraciones.

La sección roja es el ancho de la vista y la sección azul se coloca fuera de la vista inicial (por ejemplo, left: 100vw). Observe cómo en el primer ejemplo se amplía la página para que quepa cuando se omite shrink-to-fit=no (mostrando así la ventana fuera de vista contenido) y el contenido azul permanece fuera de la pantalla en el último ejemplo.

El código para este ejemplo se puede encontrar en https://codepen.io/davidjb/pen/ENGqpv .

Sin especificación de ajuste por contracción

Sin encoger para ajustar = no

Con encogimiento para ajustar = no

Con encogimiento para ajustar = no

 120
Author: davidjb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-18 07:45:21