¿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?
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
Con encogimiento para ajustar = no
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