Disable zoom on input focus in Android webpage

Question

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

Answer 1

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.

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.

• 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.