CODEWITHSUNDEEP
javascriptandroidhtmlresponsive-design
Christian Westman
Christian Westman

Reputation: 3005

dynamically changing viewport on textbox focus prevents the Android keyboard from displaying

we have a textbox in a resonsive site that, when focused, we want to prevent automatic zoom in mobile browsers.

we are currently using the following javascript snippet to acheive this.

$(document).ready(function() {
    var metaViewport = $('head').find('meta[name=viewport]');
    $('input[type="textbox"]')
    .on('focus', function () {
            metaViewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');
    })
    .on('blur', function () {
            metaViewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes');
    });
});

This however breaks the on-screen keyboard on Android devices using the stock browser, the keyboard is not displayed after the textbox has gained focus. This has been tested and verified on Android versions 2.3.5 and 4.1

Again this is in the stock browser, in Chrome it works fine.

Anyone here know if there is some kind workaround or if we simply need to disable this for Android browsers?

here is a live link that demonstrates this behavior http://creamdog.se/meta/

Upvotes: 3

Views: 1290

Answers (1)

Stuart Robson
Stuart Robson

Reputation: 1149

have you tried –

input[type="textbox"] {
    font-size: 1em;
}

in your CSS?

Similar to this - Disable Auto Zoom in Input "Text" tag - Safari on iPhone ?

Upvotes: 3

Related Questions