0

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

谢谢

4

1 回答 1

0

这是一个很难“正确”的问题。您可以尝试在输入元素焦点上隐藏页脚，并在模糊时显示，但这在 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' 更少故障，但你的里程可能会有所不同。

于 2014-09-12T22:06:18.357 回答