如何在Mobile Safari中确定iOS键盘的尺寸

Question

我目前正在尝试在针对Mobile Safari的网页中创建建议用户界面。主要组件是文本框和滚动列表，显示在包含建议列表的文本框下方。

为此，我需要1）确定键盘已显示，2）确定其大小，以便调整建议列表的大小以适应可用空间。

我已经能够通过等待焦点事件来完成（1），但是（2）仍然存在问题。我无法找到任何方法来测量键盘的大小，因为它似乎不会影响窗口尺寸或我想到的其他任何可以测量的东西。

在手机游戏中显示iOS键盘时，有没有以规范方式确定iOS键盘的大小？

Answer 1

不幸的是，没有办法计算键盘的高度。当键盘出现时，所有窗口属性都不会改变。

要确定键盘正在显示，您可以使用此解决方案： iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

然后，您需要添加特定于设备的类，并在CSS中使用媒体查询以及这些类，以便为设备和方向进行适当的设置。

如果有人有更好的黑客，我真的很想听听它。

Answer 2

没有属性可以告诉您键盘的大小，但您可以通过在键盘显示之前和之后测量top.innerHeight来计算它。

好消息是这对iOS和Android都有效。