javascript - 想要在激活 iOS 键盘时调整浏览器视口(viewport)的大小

Question

在 iOS 网络浏览器(Safari、Chrome 等)中，当您点击输入字段并显示键盘时，它会保持视口(viewport)大小不变，但会向上滑动部分不在视野范围内。这使得创建类似应用程序的网站变得非常困难，因为我正在编写一个聊天应用程序，当键盘显示时我想保持对话完全可见，但只需调整对话区域的大小以适应新的“调整大小”的可视区域。

我已经尝试了所有方法，例如让对话区域绝对定位 left: 0;右:0；顶部:0； bottom: 0，但 iOS 仍然保持视口(viewport)大小相同并将其向上推，部分超出 View 。

这可能吗？还是超出 CSS 或 JavaScript 控制的系统级功能？

Answer 1

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

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

iOS Safari 不会更改浏览器窗口的大小。它实际上将整个应用程序窗口向上推，将顶部隐藏在设备屏幕之外。因此，理论上 position: fixed; 页脚应该按照您期望的方式运行，而页眉被推到看不见的地方。 (位置 fixed 优于 absolute 因为它的 reference point is always the WINDOW 。)

在实践中，固定定位的实际工作方式似乎取决于 iOS 的版本。但是，从 iOS 版本 12 开始，您可以使用 javascript 来观察 window.innerHeight 的变化，并在发生变化时添加一个新类。

Android 上的 Chrome 似乎会物理改变浏览器窗口的高度，因此屏幕尺寸 media-queries 可能足以在这种情况下定位内容。

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