Disable Zoom on Input Focus in Android Webpage

Disable zoom on input focus in Android webpage

Not possible!

I've got some bad news for you all. It's now been 6 months and no one has correctly answered the question.

Also I've finished working on that project and employer.

I'm afraid to say it, but exactly what I asked for is impossible. Sorry peoples. But I'm going to leave the question alive so people can see the other options.

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

Chrome mobile devices input type=text zooming WAY off of the element (NOT trying to prevent zoom overall)

This was a bug with Chromium itself, which was fixed in v103.

Bug report can be found here: https://bugs.chromium.org/p/chromium/issues/detail?id=1296183

Turn off zoom on website for Android devices ONLY

A meta tag you should use to turn zoom function off would be the next:

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

You'll find more information reading the answers section of this StackOverflow question

Next thing you've got to do is to find out about user's operating system. The way to do so depends on server's programming language.

Ok, since you're using Ruby, you might need something like

request.user_agent.include?("Android")

to get user's OS. But you've got to know this information is not guaranteed to be sent.

So, combining both elements we've got something like:

<% if  request.user_agent.include?("Android") %>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<% end %>

How to disable zoom in Chrome on Android?

Try adding minimum-scale=1 to your viewport meta tag - if that doesn't help, it's likely that disabling zoom isn't supported by Chrome for Android (HTC's proprietary browser intentionally doesn't allow you to disable zoom, for instance)

Update: I just checked, and it looks like Chrome does support disabling zoom, but you have two viewport tags in your code? The second one is likely overriding the first. Remove the second one.

See this list of mobile browser support for disabling zoom for details and a good suggestion for disabling zoom across multiple browsers.

How to disable web page zooming/scaling on Android?

It's a known bug in Android browsers : http://code.google.com/p/android/issues/detail?id=11912

Disable Zoom on Input Focus in Android Webpage