如何確定移動Safari中iOS鍵盤的尺寸

Question

我目前正在嘗試在移動Safari上定位的網頁中創建建議UI。主要組件是文本框和顯示在包含建議列表的文本框下面的滾動列表。

要做到這一點，我需要1）確定鍵盤顯示和2）確定這個大小，以便調整建議列表以適應可用空間。

我已經能夠通過等待焦點事件來完成（1），但是（2）仍然存在問題。我一直無法找到任何方法來測量鍵盤的尺寸，因爲它似乎不會影響窗口尺寸或我想要測量的其他任何東西。

有沒有辦法通過程序來確定在移動Safari瀏覽器中顯示的iOS鍵盤的大小？

Answer 1

不幸的是，沒有辦法計算鍵盤的高度。當鍵盤出現時，所有窗口屬性都不會改變。

要確定鍵盤顯示時，您可以使用此解決方案： iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

然後，你需要添加特定於設備類，並沿着使用媒體查詢在你的CSS使用這些類適當風格設備和方向。

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

Answer 2

沒有屬性可以告訴您鍵盤的大小，但您可以通過在鍵盤出現之前和之後測量top.innerHeight來計算它。

好消息是，這對iOS和Android都有效。