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

I'm not sure if this is the best way but this works for me on android and iphone.

input:focus { font-size: 16px!important}

You can use media queries to target mobile devices only.

Answer 2

Worked for galaxy 4 :
Add the code to HTML header index file :

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

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

Answer 4

font-size: 18px;

This fixed it for my Nexus 7 (2011) running Android 4.3.

This problem only exists for me on the Nexus 7, the following devices all appear happy with font-size: 16px:

• HTC Desire Android 2.3.7
• Nexus 4 Android 4.3

Hope this helps someone!

Answer 5

Keep the content narrower than the window.

You will have to design your page from the beginning with this in mind, but it is entirely effective.

The key is to use the @media css at-rule to only allow components to have widths that you know the screen is big enough to contain.

For example, if you have a content width set so that the text doesn't get too spread out on a larger monitor, make sure that width only applies to large screens:

@media (min-width: 960px){
.content{
  width : 960px;
}
}

Or maybe you have an image that is 500px wide, you might have to hide it on smaller screens:

@media (max-width: 500px){
.image{
  display : none; 
}
}

Answer 6

You need 2 things:

Use a metatag like this in your head to avoid the user from zooming:

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

And then in your css put something like the following to avoid the browser from zooming:

* { font-size:16px; }

Done! I think the browser resizes your viewport based on the smallest font or something like that. Maybe someone could explain it better, but it worked :)