My responsive web app (made with Angular Material) works fine except with input fields on iOS / Safari: when the user focuses on an input field, iOS zooms the web page. Then the zoom level remains, breaking the responsiveness of the app (because then, the viewport becomes scrollable, and for instance the toolbar is no longer sticked to the top. Also, some elements supposed to be always visible on the left and on the right, are outside of the visible area due to the zoom).

I have followed recommendations given here and there, for instance https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/ and iOS Safari zoom on input box.

An almost working approach consists to use the following in the HTML header:

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

However this is not good enough in my case:

• setting user-scalable=0 prevents the user to zoom the view
• setting maximum-scale=1 also prevents the user to zoom on Chrome/Android (even if user-scalable=yes)
• the trick with the "load" event (given in the 2nd link) does not work (I suspect because this is not called when changing page in a single-page application like Angular)
• the trick using font-size=16px does not work for me (like many people also report).

Would anyone have a suggestion, to:

• either prevent the focus on an input field to cause a zoom
• or resetting the zoom to 1 after this operation
• while letting users zoom the view manually if they wish to ?