Disable Auto Zoom in Input "Text" Tag - Safari on Iphone

Prevent iPhone from zooming form?

UPDATE:
This method no longer works on iOS 10.

It depend from the Viewport, you can disable it in this way:

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

add user-scalable=0 and it should work on your inputs as well.

How to handle Safari iOS zoom on input fields

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/

Prevent zooming in after input field focus in Firefox on mobile

Fixed in 96

This is now fixed for Firefox Mobile 96 and later. There is some indication from the bug thread that it wasn't an issue in versions before 94, but I can't confirm exactly what version introduced this bug.

Set a meta tag with minimum-scale=1 and maximum-scale=1, such as:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1" />

Reference: Bug 1738696

Just setting user-scalable=no in a <meta name="viewport" tag will work in the future, as well as just setting CSS like touch-action: manipulation. Follow Bug 1746126 for updates on that.

For all mobile browsers

To prevent input field zooming across all mobile browsers, I'd suggest also including user-scalable=no, just to cover all your bases. So the final answer is to put this in your <head>.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

Prevent iPhone from zooming in on `select` in web-app

It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.

Giving a metatag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Since the problem is with select element only, try using the following in your css, this hack is originally used for jquery mobile.

HTML :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS:

select{
font-size: 50px;
}

src: unzoom after selecting in iphone