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 post a answer because I faced a similar problem and I resolved it.

My condition is below.

A viewport setting in html head is

Agents are Android default browser.
They aren't Chrome, Firefox and Safari.
Android versions are under 4.2.x.

Details of our situations are not same but I think they have an essentially equal problem.

I resolved it to add "target-densitydpi=device-dpi" into meta[name=viewport] tag.

Try it please.

But I have to say that "target-densitydpi=device-dpi" would have a side effect.

Bad case is here.

1. An android OLD browser reads "target-densitydpi=device-dpi".
2. It goes to the other page which has no target-densitydpi property.
3. The browser starts to render the page as "target-densitydpi=device-dpi".
4. So it renders the next page in a wrong scale factor.

A solution of this case is to rewrite target-densitydpi property to "medium-dpi" from "device-dpi" using javascript before going to the next page.

An example using jQuery.

Other page

And... this code causes a new problem.
Some browsers render results of javascript process using cache data when they go back to previous page using a back button. So they display the previous page as "target-densitydpi=medium-dpi" NOT as "target-densitydpi=device-dpi".

A solution of this is just the opposite of above.

Thank you.