Phonegap KeyboardShrinksView and position fixed on iOS not applying correctly

问题

I use the 2.9.0 version of Phonegap and I want that when the keyboard appears my WebView shrinks like it's done in Android phonegap apps. I have footer and header elements in fixed position, and when the keyboard is open it causes trouble (the footer and header loose their fixed position state).

I think the KeyboardShrinksView settings could fix that, according to the phonegap documentation : http://docs.phonegap.com/en/2.9.0rc1/guide_project-settings_ios_index.md.html#Project%20Settings%20for%20iOS

But with a lot of try I'm not able to make it work, the WebView doesn't shrinks.

I was thinking maybe it can come from a conflict between others preferences set on my config.xml :

config.xml

<gap:platform name="ios" />
<gap:platform name="android" />

<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="false" />
<preference name="orientation" value="portrait" />
<preference name="KeyboardShrinksView" value="true" />

Or maybe it can come from meta tag definition, specially the viewport :

index.html

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

Do you know why it's not working ? Or do you have a workaround for this ?

EDIT : I had seen that it changes something when KeyboardShrinksView=true, but when the keyboard is open, it's hidding the bottom of my content (including my footer and the field) instead of resizing my whole content. I expect it's placing my footer just at the top of the keyboard, am I right ?

Thank you for your help

回答1:

Yeah - this is a pain to deal with right now. Currently there is no real fix to make things like they used to be in iOS. Personally, I currently juggle two different tags in my apps (one for iOS and one for Android) and it gets close to the old behavior on iOS. Here's what I use:

<!-- IOS --> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />`
<!-- ANDROID --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />

My config.xml settings are what you'd expect:

<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardShrinksView" value="false" />

Here are a few links to keep an eye on and to keep bugging (i.e. requesting) that the Cordova folks finally fix it.

Issue CB-4862: https://issues.apache.org/jira/browse/CB-4862 (This is the core issue thread. It was originally closed but after a comment I made a while ago it was reopened)
Issue CB-5852: https://issues.apache.org/jira/browse/CB-5852 (This is where CB-4862 folks were told a possible fix might exist - but initial tests by devs show it's not really a solution sadly).

Hopefully these links will at least help get you up to date w/the latest info on the keyboardshrink related issues. If anyone else has leads/links on this please do share!

回答2:

I fixed it by calling this code on every page change - :

    $('input').unbind('focusout');
    $(document).on('focusout', 'input', function() {
        setTimeout(function() {
            window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
        }, 500);
    });

来源：https://stackoverflow.com/questions/20223617/phonegap-keyboardshrinksview-and-position-fixed-on-ios-not-applying-correctly

标签

ios

cordova

webview

keyboard