PhoneGap / JQuery Mobile - 键盘可见时页面样式中断答案

【问题标题】：PhoneGap / JQuery Mobile - Page style breaking when keyboard is visiblePhoneGap / JQuery Mobile - 键盘可见时页面样式中断
【发布时间】：2011-07-18 10:25:38
【问题描述】：

我有一个使用 Phonegap 和 JQuery Mobile 构建的应用程序。每当软键盘显示时 - 在表单输入等上 - 整个页面都会调整大小。图像、按钮和文本。我假设是什么破坏了 CSS？

其他人也遇到过这个问题，或者知道为什么会这样吗？我必须重新启动应用程序才能重置布局。

任何想法表示赞赏！

谢谢！

【问题讨论】：

我有类似的问题，但在 Iphone 有什么想法吗？
@Geek 对不起，我不知道——我在 4 年前就开始研究这个了。
没问题的朋友我找到了解决办法

标签： android jquery-mobile cordova

【解决方案1】：

我在这里找到了答案：

http://solutions.michaelbrooks.ca/2011/07/05/android-soft-keyboard-resizes-web-view/

http://comments.gmane.org/gmane.comp.handhelds.phonegap/10207

组合加法：

android:windowSoftInputMode="adjustPan"

到 AndroidManifest.xml

和<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

到 index.html，为我完成了这项工作。

希望这对某人有所帮助。

【讨论】：

我已经尝试修复它大约两天了。您的解决方案有效。非常感谢。
Phonegap Build 应用怎么样？那里没有 AndroidManifest.xml？
@jeekonline 这个答案是在 Phonegap Build 存在之前写的 - 不确定如何处理。希望其他人可以在那里提供答案？
@jeekonline 我刚刚添加了一种使用带有 config.xml 首选项选项的相同 android 属性来修复它的方法，请查看我在stackoverflow.com/a/24581234/2532797 的答案，希望对您有所帮助

【解决方案2】：

对于 Phonegap Build 用户，config.xml 文件中有一个包装首选项，

<preference name="android-windowSoftInputMode" value="stateHidden|adjustPan" />

它可以取的值和android原生属性一样，如果你需要更多关于参数和行为的信息，请参考android开发者指南：http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft

我使用 Phonegap Build 3.3.0 和 jQuery Mobile 对此进行了测试，对我来说效果很好，希望对我有所帮助。

【讨论】：

【解决方案3】：

我有一个经过验证的解决方案来解决这个问题，我也面临同样的问题，但我自己解决了。首先在 body 中创建一个字段并将其隐藏，或者您可以使用 z-index 将其隐藏在 div 后面，使其不可见。

<script>
$(document).ready(function() {
document.getElementById('example').value='';
});
 </script>
   <body>
   <div style='z-index:50;position:absolute;height:100%;width:100%;'>
   Your page matter here</div>
    <select id='example' style='z-index:10'>
    <option value=''>a</option>
    </select></pre>
   </body>

问题是我们必须在页面加载时设置这个选择字段，这样做肯定会停止闪烁......试试吧伙计......它对我有用

【讨论】：