Question

我正在使用phonegap（cordova）创建一个新的iPhone应用程序。我的应用程序有一个问题。如果我点击任何输入字段，iphone键盘弹出，整个页面位置也在变化。就像固定页脚弹出键盘上方一样。请指导我。

谢谢

Answer 1

这是一个“正确”的难题。您可以尝试在输入元素焦点上隐藏页脚，并在模糊时显示，但在iOS上并不总是可靠。每隔一段时间（十次，例如，在我的iPhone 4S上），焦点事件似乎无法触发（或者可能存在竞争条件），并且页脚不会被隐藏。

经过多次反复试验，我想出了这个有趣的解决方案：

<head>
    ...various JS and CSS imports...
    <script type="text/javascript">
        document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
    </script>
</head>

基本上：使用JavaScript确定设备的窗口高度，然后动态创建CSS媒体查询，以在窗口高度缩小10像素时隐藏页脚。因为打开键盘会调整浏览器显示的大小，所以在iOS上永远不会失败。因为它使用的是CSS引擎而不是JavaScript，所以它更快更顺畅！

注意：我发现使用'visibility：hidden'比'display：none'或'position：static'更少，但你的里程可能会有所不同。

phonegap应用程序上的iPhone键盘弹出问题？

1 个答案: