Question

我正在尝试使用PhoneGap，我的HTML以：

开头

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height" />

稍后在HTML中我有一个输入文本字段。通常，当输入字段获得焦点并显示键盘时，Web视图会向上滚动。但是，在我的情况下，键盘覆盖视图，它不向上滚动（我想要它）。

如果删除上面的<meta name="viewport" ...>标记，视图会向上滚动，但也会向侧面滚动，也会变得可扩展（我不想要）。

如何在Android和iOS上获得键盘（以及仅键盘）推动视图（并且仅向上）的所需行为？

编辑

我在Get viewport height when soft keyboard is on找到了类似的案例 - 我还有一些固定 div，宽度和高度设置为100％：

    .main {position:fixed; top:0; left:0; width:100%; height:100%;}

但是，如果我只是将定位修改为static，则视图不会被“推”起来，而是“挤压”起来......不是理想的行为。

Answer 1

我想我发现了会发生什么，也是一个很好的解决方法：

在我的代码的其他部分中，有一个每秒运行的函数，对window.innerWidth window.innerHeight进行抽样以测试屏幕方向（配置文件与横向）。它还将这些新值分配给main div的宽度和高度。

＆＃34;技巧＆＃34;我由两部分组成：

检测（差不多）虚拟键盘是否为＆＃34; on＆＃34;或者＆＃34;关闭＆＃34;通过分配＆＃34;焦点＆＃34;和＆＃34;模糊＆＃34;事件到输入文本字段。
当＆＃34; on＆＃34;时，只使用采样window.innerWidth window.innerHeight的一半，因此实际内容会很好地缩小到上层 - 左下角有一个keboard。

PhoneGap键盘没有推高webview

1 个答案: