如何处理安卓键盘覆盖固定元素？

Question

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

position: fixed;
bottom: 0;

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

然而，在Android上，键盘只是简单地覆盖了所有的东西，所以你再也看不到输入元素了。

我怎么做才能让它在iOS和Android上都能使用？

Answer 1

一种方法是存储初始窗口(viewport)高度，并在窗口resize事件上进行比较。假设在99%的情况下，智能手机上的窗口大小不会改变，你可以假设键盘正在显示。但是，对我来说，这有点黑客化。

Answer 2

一旦你得到了视口的实际大小，你只需要更新视口的 bottom:x 你的元素的值。

如果你问的是你是否可以 只用css检测那么，你可能想看看 css媒体查询.

CSS媒体查询：最大宽度或最大高度。