Prevent zooming in after input field focus in Firefox on mobile

user_1516291 0
Viewed 2147

I want to disable auto zoom when focusing an HTML input field on Android Firefox (possibly iOS Safari).

I've read many related, ancient threads on SO [1, 2, 3] and on the web, but found neither a working solution nor a definitive answer that this is not possible in 2021. The only test device I have is an Android phone (this may also happen with iOS), on which the issue only comes up with Firefox; Chrome works as intended (by me).

I have tried:

  • setting font-size: 16px on the input field
  • setting <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1" />
  • and out of desperation even <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1, user-scalable=no">

Android 11, Firefox 93.1.0

Is what I want to achieve really not possible?

firefox forms android css html
1 Answers

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" />
user_73612700
Related