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

As @soshmo said, user-scalable isn't an attribute that WebKit likes and so its inclusion causes WebKit to discard the whole viewport tag. I also found this to be the case with setting maximum-scale to anything other than 1, and that didn't stop the zooming.

Resetting the viewport on every focus and blur event worked for me:

var htmlWidth = parseInt($('html').outerWidth());
var screenDPI = parseInt(window.devicePixelRatio);
var screenWidth = parseInt(screen.width);
var screenHeight = parseInt(screen.height);    
var scaleVal = (((screenWidth * screenDPI) / htmlWidth)/screenDPI);
$('input[type="text"], input[type="password"], input[type="email"]').each(function() {

    //unchained for clarity

    $(this).focus(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
        // Do something to manage scrolling the view (resetting the viewport also resets the scroll)
        $('html, body').scrollTop(($(this).offset().top - (screenHeight/3)));
    });

    $(this).blur(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
    });
});

If you find that setting/resetting the viewport it's worth checking that WebKit accepts the content attributes that you're using. It took me a while to realise that using things like user-scalable caused the viewport to be discarded, so even though the JavaScript was working, the changes were not affected.

Answer 2

I've been looking at this problem as it's something that's been irritating me with my HTML5 Android app. I can offer half an answer. That's to say, how to stop the page scaling when a text field is focussed.

Requires Jquery Mobile:

$('#textfield').textinput({preventFocusZoom:true});

does exactly that.

But, as I said, this only solves half of the problem. The other half is allowing the user to zoom the page again afterwards. The documentation I've found seems to suggest that

    $('#textfield').textinput({preventFocusZoom:false});

or

$('#textfield').textinput('option','preventFocusZoom',false);

should un-set it, but I haven't managed to get either option to work. Not a problem if you're going to be taking the user to another page afterwards, but of limited use if, like me, you're just going to load content via AJAX.

EDIT: Although aimed at IOS,

$.mobile.zoom.disable();

Also stops the zooming. In a more suitably generic way. But unfortunately

$.mobile.zoom.enable();

Fails to restore the functionality just like the former code.

Answer 3

Bit late to the party, but I spent a whole afternoon yesterday going nuts before I got to this post and realized it was a feature/bug from Android. So I'll post my solution. This worked for me, and still enables user zoom:

Meta:

<meta id="meta1" name="viewport" content="width=device-width,initial-scale=1,minimal-ui"/>

CSS:

html{
    position:absolute;
    overflow:-moz-scrollbars-vertical;
    overflow-y:scroll;
    overflow-x:hidden;
    margin:0;padding:0;border:0;
    width:100%;
    height:100%;
    }
body{
    position: relative;
    width: 100%;
    height: 100%;
    min-height:100%;
    margin: 0;
    padding: 0;
    border: 0;
}

Setting HTML to position:absolute and overflow-x:hidden did the trick for me.

Answer 4

Just a side note:

The solution with the meta name="viewport" works perfectly. However, both native and Chrome browsers in Android have an accessibility setting named "Override website's request to control zoom". If this setting is set, nothing in HTML, CSS, or JavaScript can disable zooming.

Answer 5

I'm not sure if you can disable the zoom, but you can set a restriction like this

 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

maximum-scale=0.5 and minimum-scale=0.5 should do the trick. It worked for me.

Answer 6

Ran into this issue today and may have a chromium update coming down the pipe soon that could resolve it. Per the chromium issue pointed to by @Jo,

no.28 jdd...@chromium.org As of https://codereview.chromium.org/196133011/, autozooming is disabled on sites that have a mobile-optimized viewport (e.g., "width=device-width" or fixed page scale viewport annotation).

There may still be auto-scrolling when focusing editable elements on such sites, to maintain the element's visibility, but zooming will be disabled. This will go live in M41 (still a good number of weeks from hitting beta channel).

We don't have any plans to otherwise prevent autozooming for legacy desktop sites.

As of this time, Chrome is v.40; v.41 is in BETA. Will be checking in to see if focus continues to be lost on the Android Chrome browser.