jQuery mobile footer or viewport size wrong after android keyboard show

Question

I have the following problem with a jquery mobile webapp.

I have a fixed footer for my jquery app, but when the android keyboard opens (i.e. when clicking in the browser bar and manually reloading the page), it seems that the viewport is only from top (below the browser bar) down to the upper edge of the keyboard. Then the page reloads and the height of the viewport keeps this size, so it is way too small when the keyboard hides again. How can I force a resize when the keyboard is hidden again?

Thanks a lot for your help.

Answer 1

Try putting this meta tag in your header. It might fix your problem:

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

Answer 2

Its imposible to avoid this behavior with javascript or css.. check this info link

Answer 3

For anyone else experiencing this issue with android, I noticed the page would load in full without the meta viewport, so tried adding dynamically with a delay for android browsers to wait for keyboard to disappear.

var ua = navigator.userAgent.toLowerCase();
var isAndroid = /android/i.test(ua);
if(isAndroid) {
    setTimeout(function(){
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
    },100);         
} else {
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
}

Change timeout duration as you like, but too short and it doesn't always work. Only problem is you get a flash of shorter content on android. Firing the orientationchange or resize events in order to repaint after keyboard has gone would be a better solution but I could not get the window to repaint at the correct height through JS.

Answer 4

Try binding to the resize event on window