Search code examples
iosangularmobilesafarizooming

How to handle Safari iOS zoom on input fields

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 ?
Solution

  • Are any of your font sizes smaller than 16px?

    You might be experiencing a browser behavior that isn't related to Angular Material.

    My team experienced a similar problem. We found your question as part of our work. We eventually realized that the viewport zooming behavior that we saw had nothing to do with Angular Material. That's simply what iOS does when the font on an input field is less than 16px: https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ Any input field. Angular Material has nothing to do with it.

    Related: Please note that disabling viewport zoom for mobile was standard practice for about a decade after the introduction of the iPhone, but it is no longer The Way. https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/