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

For Nexus 7 I was getting this issue when my media query was -

@media screen and (max-device-width: 600px) and (orientation : portrait)

So I used below media query to resolve the issue -

@media screen and (max-device-width: 600px) and (max-aspect-ratio: 13/9)

Answer 2

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

<meta name="viewport" content="width=640">

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.

<meta name="viewport" content="width=640, target-densitydpi=device-dpi">

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.

<a href="go-to-the-other" class="resetDensityDpi">Other page</a>
<script>
$(function(){
    $('.resetDensityDpi').click(function(){
        var $meta = $('meta[name="viewport"]');
        $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=device-dpi/, 'target-densitydpi=medium-dpi'));
        return true;
    });
});
</script>

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.

<script>
$(function(){
    var rollbackDensityDpi = function() {
        // disable back-forword-cache (bfcache)
        window.onunload = function(){};

        var $meta = $('meta[name="viewport"]');
        if ($meta.attr('content').match(/target-densitydpi=medium-dpi/)) {
            $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=medium-dpi/, 'target-densitydpi=device-dpi'));
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", rollbackDensityDpi, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", rollbackDensityDpi);
    } else {
        window.onload = rollbackDensityDpi;
    }
});
</script>

Thank you.

Answer 3

Yes, it's possible

input[type='text'],input[type='number'],textarea {font-size:16px;}

Tested in Android 4.2 browser and Android Chrome.

https://stackoverflow.com/a/6394497/4264

The only case I found that it kept zooming was in Chrome with Settings -> Accesibility -> Text scaling higher than 100%.

Answer 4

Try using this, this will fit into device size and avoid zoom in/out

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Answer 5

This may be good answer:

input, textarea {
  max-width:100%;
}

Don't use <meta name=viewport content='user-scalable=no'>

Answer 6

Setting the viewport user-scalable property on touchstart did it for me, no need to remove then re-add simply change it on touchstart then enable again on blur. Means the user can't zoom whilst focused on the field but a small price to pay I think.

var zoomEnable;

zoomEnable = function() {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=yes");
};

$("input[type='text']").on("touchstart", function(e) {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=no");
});

$("input[type='text']").blur(zoomEnable);