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

【问题标题】：Want to have browser viewport resize when iOS keyboard is activated想要在激活 iOS 键盘时调整浏览器视口大小
【发布时间】：2014-07-19 09:04:02
【问题描述】：

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

我已经尝试了所有方法，例如将对话区域绝对定位为 left: 0; right: 0; top: 0; bottom: 0，但 iOS 仍然保持视口大小相同并将其向上推并部分移出视图。

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

【问题讨论】：

你找到解决办法了吗？
@IevgenNaida 不，从来没有发现任何东西，但是自从提出这个问题后我就没有研究过它。我只是假设这是不可能的。

标签： javascript ios css safari

【解决方案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 在这种情况下可能足以定位东西。

与往常一样，有很多设备/操作系统/屏幕组合，您应该尽可能多地进行测试，并注意您可能永远无法解决所有这些问题。

【讨论】：