如何处理覆盖固定元素的Android键盘？

Posted 2023-05-06

【中文标题】如何处理覆盖固定元素的Android键盘？

【英文标题】：How to handle Android keyboard overlaying fixed elements?

【发布时间】：2020-09-10 23:45:33

【问题描述】：

我的网站上有私人消息功能。消息窗口是一个固定元素：

position: fixed;
bottom: 0;

在 ios 上，当打开位于消息窗口最底部的输入时，键盘只会将整个网站推到顶部，这样您仍然可以看到您正在输入的内容。

但是，在 android 上，键盘只是与所有内容重叠，因此您不再看到输入元素：

我该怎么做才能让它同时在 iOS 和 Android 上运行？

【问题讨论】：

尝试从“应用”的角度去研究，也许你会在那里找到答案！随时通知我们。 ***.com/questions/16788959/…

【参考方案1】：

一种方法是存储初始窗口（视口）高度并在窗口调整大小事件中进行比较。假设在 99% 的情况下智能手机上的窗口大小不会改变，您可以假设正在显示键盘。但是，对我来说，这有点 hacky

【讨论】：

这并没有真正的帮助。我已经可以捕捉到这个事件，我的问题是我不知道如何使用 css 正确显示它。据我所知，例如没有办法检测键盘的高度。

正如我所说 - 存储原始高度值。它是设备屏幕的总高度。然后，一旦您看到窗口大小的变化 - 总高度减去新高度等于键盘高度

好的，谢谢。不过有一个大问题。一些浏览器实际上会自己推送内容（如预期的那样）。有些没有。我将如何检测到这一点？

【参考方案2】：

获得视口的实际大小后，只需更新元素的bottom:x 值即可。

如果您询问是否可以仅使用 css 检测，那么您可能需要查看 css 媒体查询。

CSS media queries: max-width OR max-height

【讨论】：

好吧，你的意思是我应该在移动设备上监听视口高度的变化，获取更新后的视口大小并相应地设置底部属性，对吧？这听起来确实是个好主意。

不过有一个大问题。一些浏览器实际上会自己推送内容（如预期的那样）。有些没有。我将如何检测到这一点？