Mi aplicación web receptiva (hecha con material angular) funciona bien excepto con campos de entrada en iOS/Safari: cuando el usuario se enfoca en un campo de entrada, iOS amplía la página web. Luego, el nivel de zoom permanece, rompiendo la capacidad de respuesta de la aplicación (porque entonces, la ventana gráfica se vuelve desplazable y, por ejemplo, la barra de herramientas ya no está pegada a la parte superior. Además, se supone que algunos elementos siempre están visibles a la izquierda y a la derecha. , están fuera del área visible debido al zoom).

He seguido las recomendaciones dadas aquí y allá, por ejemplo https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/ y iOS Safari zoom en el cuadro de entrada .

Un enfoque casi funcional consiste en utilizar lo siguiente en el encabezado HTML:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>

Sin embargo, esto no es lo suficientemente bueno en mi caso:

• establecer user-scalable=0 evita que el usuario haga zoom en la vista
• configurar maximum-scale=1 también evita que el usuario haga zoom en Chrome / Android (incluso si user-scalable=yes )
• el truco con el evento " load " (dado en el segundo enlace) no funciona (sospecho porque no se llama al cambiar de página en una aplicación de una sola página como Angular)
• el truco usando font-size=16px no funciona para mí (como muchas personas también informan).

¿Alguien tiene una sugerencia para:

• ya sea evitar que el enfoque en un campo de entrada provoque un zoom
• o restablecer el zoom a 1 después de esta operación
• mientras permite a los usuarios hacer zoom en la vista manualmente si así lo desean?