How to handle Safari iOS zoom on input fields

Question

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 ?

Commissary

It is a little bit late but I hope this could help someone else. This link provides a good workaround: https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming – Ambit

Answer 1

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/

Baber

Thank you so much: thanks to you I have understood the reason of the 16px recommendations I read elsewhere. And I could implement a fix by adding a CSS rule input { font-size: 16px!important; }, which does the job. – Commissary

Is there a way to allow the behaviour to happen and then reset it after it has happened? – Ancalin

Answer 2

I've come across this issue lately and managed to find a workaround.

For those utilizing frameworks like Angular, React, Vue, etc., ensure to inspect this section of your code within the head element:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, viewport-fit=cover">

Try adjusting your maximum-scale property to 1 and test it again. This might resolve the issue caused by iOS +17 zooming in .

Evesham