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

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.

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.