CSS（/ JS？）检测键盘是否在屏幕上显示（电话和其他触摸设备）

Question

是否有CSS媒体查询来确定屏幕上是否显示键盘？

考虑以下情况：我的网站的标题中带有搜索图标。用户单击该图标时，将打开全屏搜索菜单。此搜索菜单包含一个搜索表单，该表单在垂直和水平方向上居中（在全屏搜索菜单容器中），因此它也在屏幕上居中。当用户单击搜索图标时，输入元素将使用jQuery（.focus）激活。

[当用户拥有电话或iPad时，键盘将显示在内容的顶部。表单仍然垂直居中，但是现在键盘覆盖了网页的一部分，因此垂直对齐不正确。在这种情况下，我想更改搜索表单的top属性（它具有相对位置），以便可以将搜索表单放在更高的位置。

我已经想知道是否可以使用@media来检测触摸屏（可能是like this），但这不适用于连接或通过蓝牙连接了物理键盘的iPad和iPhone等设备。这些触摸设备不会在屏幕上显示键盘。

下面是问题的一个例子。如您所见，搜索表单部分被键盘覆盖。但是，当连接了物理键盘时，我没有问题，并且对齐正确。

如何在网站的可见部分中使内容垂直居中？或在屏幕上显示键盘的情况下检测设备？

Answer 1

如果我理解正确，您可以在此链接中找到答案：

Show virtual keyboard on mobile phones in javascript