¿Qué hace el meta atributo de ventana retráctil para ajustar?

143

Tengo problemas para encontrar documentación para esto. ¿Es Safari específico?

Hubo un error reciente en iOS 9 ( aquí ), cuya solución se agrega shrink-to-fit=noal meta de la ventana gráfica.

¿Qué hace este código?

html safari webkit ios9 viewport 755
fuente

Respuestas:

193

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.

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 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=nose 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 .

Sin contracción especificada

Sin contracción para ajustar = no

Con ajuste por contracción = no

Con ajuste por contracción = no

davidjb
fuente
2
Lo siento, pero todavía no entiendo qué hace ese código. ¿Puedes explicar de otra manera? ¡Gracias!
Daniel Springer
3
@Dani De manera predeterminada, Safari ampliará una página para que se ajuste a cualquier contenido que desborde la ventana gráfica (el primer ejemplo muestra el área azul como visible; eso está desbordando). La especificación shrink-to-fit=noevita 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á.
davidjb
2
Ah, ya veo. Pero, ¿por qué alguien querría que parte de su contenido se ocultara en pantallas más pequeñas?
Daniel Springer
77
@Dani Varias razones, pero ejemplos rápidos son los controles deslizantes / carruseles que colocan el contenido fuera de la ventana gráfica, o contenido no receptivo grande (por ejemplo, imágenes / tablas) que de otra manera se desbordaría y causaría que el resto de la página se volviera pequeña con el valor predeterminado shrink-to-fitcomportamiento. 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.
davidjb
2
@davidjb Creo que esto se solucionó con el último iOS 11. No puedo reproducir este error.
Zeel Shah
12

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

GGGin
fuente