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

Question

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

position: fixed;
bottom: 0;

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

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

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

Answer 1

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

Answer 2

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

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

CSS media queries: max-width OR max-height