html - usar - ¿Qué hace el meta atributo de ventana retráctil para ajustar?
usar atributo alt en html (2)
Tengo problemas para encontrar documentación para esto. ¿Es Safari específico?
Hubo un error reciente en iOS 9 (
here
), cuya solución es agregar
shrink-to-fit=no
al meta del viewport.
¿Qué hace este código?
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
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
Las metaetiquetas de ventana gráfica que usan
"width=device-width"hacen 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
left: 100vw
inicial (por ejemplo,
left: 100vw
).
Observe cómo en el primer ejemplo, la página se amplía para ajustarse cuando se omite
shrink-to-fit=no
(lo que muestra 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 .
