Disable zoom on input focus in Android webpage

Here's the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I don't want it to zoom in - sounds easy, right?

Here's where it gets fun: I have to be able to zoom in general so don't say

<meta name='viewport' content='user-scalable=0'>

That won't work for me.

Also, the input box doesn't receive click events. It appears when another button is clicked a gets focus programmatically.

Here's what I've tried and they've failed so far:

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

This also failed:

<input type='text' onfocus="return false">

And this:

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

Any ideas?

Solution 1:

The following worked for me (Android Galaxy S2):

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

Solution 2:

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.

Solution 3:

Scale Issues Cause Zoom on Input Focus

There is a great difficulty in sizing the content for different screen resolutions and sizes, which ultimately is the cause of this zoom issue.

Most mobile browsers have a trigger on input focus (that you can't over-ride without difficulty):

if (zoom-level < 1)
   zoom to 1.5
   center focused input relative to screen

*yes, that was way over-simplified.

Myth of meta-tag scale fixes.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> All such viewport settings will not prevent the input-focus zoom if you are zoomed-out. These will also not over-ride any other html, body, or element sizing that would push the window to width wider than the screen.

Primary Cause

Using a window or body size larger than the device screen dimensions.

Consider the standard screen-size of most of the Galaxy line of Android smartphones: 360 x 650. If your document body, or window, is defined to be larger than that (let's say 1024 wide to make it obvious), a few things may happen:

1. The browser may auto-zoom out, to fit the width to the screen.
   2. The user may do the above.
   3. You may have done the above.
2. The browser will restore the zoom-level on subsequent visits to the page.
3. You're now viewing the content at ~0.35x zoom.

Initial State 1x

When loaded, the page won't fit. Some browsers may zoom-out to fit the window, but the user most certainly will. Additionally, if you zoomed-out on this page once, the browser will store the zoom-level.

Zoom Out to Fit 0.35x

Once zoomed out, the width will fit nicely, and a page with more vertical area will fill out the screen quite nicely... but...

Notice that the browser is now in a state where text and input (sized for normal 1x zoom) would be way too small to read, thus triggers a usability behavior of zooming on the input fields when they get focus.

Zoom on Input-Focus 1.5x

Typical behavior in the above case, is to zoom to 1.5x, to ensure input visibility. The result (if you've styled everything to look better when zoomed-out, or for the larger screen) is less than desirable.

Solution 1

Use a combination of css media rules, device-detection, or whatever best suits your situation. Set the window and body to a size that fills the screen-space, without exceeding it.

• This is why so many people have success with forcing input text-size to 16px;
  • once you do that, its clear that you're WAY zoomed out.
  • it also has the added benefit of tricking the browser into allowing slightly zoomed out windows to not trigger the focus-zoom.

Solution 2

Use the meta viewport, but then be careful with css widths.

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

• When using this method, you must do one of the following:
  • Only use percentages for widths.
  • Define an em width, and only use em and % for widths.
  • see Solution 1 for using px widths.

Solution 3

jQuery.mobile $.mobile.zoom.disable();

Just make sure you start developing with it from the start, and not from the middle.