iOS 上固定的 Phonegap KeyboardShrinksView 和位置未正确应用

Question

我使用 2.9.0 版本的 Phonegap，我希望当键盘出现时，我的 WebView 会像在 Android phonegap 应用程序中那样缩小。我在固定位置有页脚和页眉元素，当键盘打开时会导致问题（页脚和页眉松动它们的固定位置状态）。

根据 phonegap 文档，我认为 KeyboardShrinksView 设置可以解决这个问题：http://docs.phonegap.com/en/2.9.0rc1/guide_project-settings_ios_index.md.html#Project%20Settings%20for%20iOS

但是经过大量尝试我无法使其工作，WebView 不会缩小。

我在想也许它可能来自我在 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" />

或者它可能来自元标记定义，特别是视口：

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

你知道为什么它不工作吗？或者您有解决方法吗？

编辑：我已经看到它在 KeyboardShrinksView=true 时发生了一些变化，但是当键盘打开时，它隐藏了我的内容的底部（包括我的页脚和字段），而不是调整我的整个内容的大小。我希望它会将我的页脚放在键盘顶部，对吗？

感谢您的帮助

Answer 1

是的 - 现在处理起来很痛苦。目前还没有真正的解决方法可以让事情变得像以前在 iOS 中那样。就个人而言，我目前在我的应用程序中处理两个不同的标签（一个用于 iOS，一个用于 Android），它接近于 iOS 上的旧行为。这是我使用的：

<!-- 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" />

我的 config.xml 设置是你所期望的：

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

这里有一些链接可以密切关注和，以便继续窃听（即请求）Cordova 人员最终修复它。

• 问题 CB-4862：https://issues.apache.org/jira/browse/CB-4862（这是核心问题线程。它最初已关闭，但在我前一阵子发表评论后，它被重新打开）

• 问题 CB-5852：https://issues.apache.org/jira/browse/CB-5852（这是 CB-4862 人员被告知可能存在修复的地方 - 但开发人员的初步测试表明这并不是一个真正的解决方案。

  李>

希望这些链接至少可以帮助您了解有关键盘收缩相关问题的最新信息。如果其他人对此有线索/链接，请分享！

Answer 2

我通过在每次页面更改时调用此代码来修复它 - ：

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