想要在激活iOS键盘时调整浏览器视口大小

Question

在iOS网络浏览器（Safari，Chrome等）中，当您单击输入字段并显示键盘时，它会使视口保持相同的大小，但会将其部分滑出视图。这使得创建类似app的网站变得非常困难，因为我正在编写一个聊天应用程序，当键盘显示我希望完全保持对话时，只需调整对话区域的大小以适应新的“已调整大小”的可视区域。

我已尝试过所有内容，例如将会话区域与left: 0; right: 0; top: 0; bottom: 0完全对齐，但iOS仍会保持视口大小相同，并将其向上推，部分不在视野范围内。

这可能吗？还是系统级功能无法控制CSS或JavaScript？

Answer 1

简单的答案是... 软键盘与浏览器是分开的，不能由浏览器内部的任何东西控制。

Android和iOS对软键盘的处理方式都不同，因此编写在设备上正常工作的内容将很困难。

iOS Safari 不会更改浏览器窗口的大小。实际上，它会将整个应用程序窗口向上推，从而将顶部隐藏在设备屏幕之外。因此，从理论上讲，{@ {1}}页脚应该可以按预期的方式发挥作用，而抬头不可见。 （位置position: fixed;比fixed的位置reference point is always the WINDOW更好。）

在实践中，固定定位的实际工作方式似乎取决于iOS版本。但是，从iOS 12版开始，您可以使用javascript观看对absolute的更改，并在情况发生变化时添加新的类。

Android上的Chrome 似乎在物理上改变了浏览器窗口的高度，因此在这种情况下，屏幕尺寸window.innerHeight可能足以放置内容。

一如既往，有太多的设备/操作系统/屏幕组合，您应该尽可能地进行测试，并且要意识到，您可能永远也无法解决所有这些问题。