javascript - 当 Android 软键盘处于事件状态时，防止网页视口(viewport)调整大小

Question

我正在开发一个用于响应式网页设计的 Javascript/JQuery 插件。它具有监视视口(viewport)变化的功能，特别是调整大小和方向。当检测到变化时，就会调用相应的回调函数。

但是，我刚刚注意到，在 Android 上(特别是在 Google Galaxy Nexus 上使用内置浏览器)，如果用户尝试使用软键盘，它会调整视口(viewport)大小，从而触发回调函数。这是我想消除的行为。

有没有办法 - 通过 Javascript - 禁用此行为或检测它，以便我可以更改代码库以适应它？!

到目前为止，我看到的解决方案主要与 Android 应用程序开发有关，我不确定它们是否适用于我的案例。

谢谢。

Answer 1

好吧，经过一番摆弄，我找到了解决问题的方法。

那么当软键盘显示/隐藏时会发生什么？!在我的测试中，视口(viewport)宽度保持不变。但是，当软键盘显示 43% 时，视口(viewport)高度 会更改大小 [((当前 - 上一个)/上一个)*100] (纵向)和 58%(横向)；以及当软键盘分别隐藏 73%(纵向)和 139%(横向)时。

所以我所做的是当以下条件全部成立时禁用回调函数:

1. 该设备是移动设备
2. 视口(viewport)宽度的百分比变化小于 1%
3. 视口(viewport)高度的百分比变化大于 35%

由于移动设备浏览器没有像桌面上那样的调整大小句柄，因此我不认为会出现用户以自然的方式模仿上述条件的情况。

您可以在此处查看代码示例:https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419 。不幸的是，它是更大代码集的一部分，但您应该能够根据条件收集基本思想。

干杯。