jQuery mobile footer or viewport size wrong after android keyboard show

问题

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.

回答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" />

回答2:

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

回答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.

回答4:

Try binding to the resize event on window

来源：https://stackoverflow.com/questions/7958527/jquery-mobile-footer-or-viewport-size-wrong-after-android-keyboard-show