Respuestas:
Es específico de Safari, al menos en el momento de la escritura, que se introdujo en Safari 9.0. De "¿Qué hay de nuevo en Safari?" documentación para Safari 9.0 :
Cambios de ventana gráfica
El uso de metaetiquetas de ventana gráfica
"width=device-width"
hace que la página se reduzca para ajustarse al contenido que desborda los límites de la ventana gráfica. Puede anular este comportamiento agregando"shrink-to-fit=no"
a su metaetiqueta como se muestra a continuación. El valor agregado evitará que la página se ajuste a la vista.
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
En resumen, agregar esto a la metaetiqueta viewport restaura el comportamiento anterior a Safari 9.0.
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 ventana gráfica y la sección azul se coloca fuera de la ventana gráfica inicial (p left: 100vw
. Ej .). Observe cómo en el primer ejemplo, la página se amplía para ajustarse cuando shrink-to-fit=no
se omite (mostrando así el contenido fuera de la vista) 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 .
shrink-to-fit=no
evita este comportamiento, dejando solo el nivel de zoom y dejando el contenido desbordado fuera de la pantalla. Pruebe el ejemplo de Codepen en su iDevice (o iOS Simulator) e intente cambiar la configuración. Quizás ver el cambio de manera interactiva ayudará.
shrink-to-fit
comportamiento. Con shrink-to-fit=no
, la página permanece en el tamaño esperado, permitiendo que el contenido desborde la ventana gráfica. Un usuario puede (normalmente) desplazarse o alejarse para ver el contenido de desbordamiento, pero la ventana de visualización inicial coincide con el tamaño del dispositivo.
Como estadísticas sobre el uso de iOS, lo que indica que el uso de iOS 9.0-9.2.x está actualmente en 0.17%. Si estos números son realmente indicativos del uso global de estas versiones, entonces es aún más probable que sea seguro eliminar la reducción de tamaño de la metaetiqueta de la ventana gráfica.
Después de 9.2.x. IOS elimina esta etiqueta de verificación en su 'navegador.
Puede consultar esta página https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html