当android软键盘处于活动状态时防止网页的视口调整大小答案

【问题标题】：Preventing viewport resize of web page when android soft keyboard is active当android软键盘处于活动状态时防止网页的视口调整大小
【发布时间】：2013-06-16 05:25:26
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

标签： javascript jquery android-softkeyboard

【解决方案1】：

好的，经过一番折腾，我找到了解决问题的方法。

那么当软键盘显示/隐藏时会发生什么？！在我的测试中，viewport width 保持不变。然而，viewport height 改变大小 [((current - previous)/previous)*100] 当软键盘由43%（纵向）和58%（横向）显示时；当软键盘分别被73%（纵向）和139%（横向）隐藏时。

所以我所做的就是在以下条件都为真时禁用回调函数：

设备是移动设备
视口宽度的百分比变化小于 1%
视口高度变化百分比大于35%

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

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

干杯。

【讨论】：

由于人们可以安装不同尺寸的自定义键盘，这并不是 100% 可靠的（尽管它在大多数情况下都可以使用）。也许混合它 Andreas Norman 的解决方案有效？如果在移动浏览器上，请收听方向变化。否则，听调整大小。

【解决方案2】：

我遇到了类似的问题。我的解决方案是使用方向更改事件而不是在您最不希望在 android 上触发时触发的 resize 事件：P

$(window).bind( 'orientationchange', function(e){ // Type pretty code here });

来源：http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/

【讨论】：

谢谢。这很有意义。但是，那个 eventType 看起来只适用于 JQuery Mobile？！
对不起，我忘了说它需要 jQuery。但是你只需要普通的 jQuery 就可以了 :)
哦，好的！我会试一试。谢谢。
想知道“漂亮的代码”是什么。

【解决方案3】：

我可以与我的pretty code 分享你。我在resize 事件上设置触发器并计算相对于调整大小事件之前的高度。

originalHeight * 100 / currentHeight 为您提供可以更改高度容器的百分比

您可以在此处查看代码示例 https://jsfiddle.net/ocg9Lus7/

2018 年 11 月 19 日更新

我建议您在加载窗口后将值从动态（100%、vh 等）更改为静态值。如果您需要更多动态容器，您可以通过将函数绑定到 resize 事件 (originalHeight * 100 / currentHeight) 来重新计算大小

您可以在此处查看代码示例：https://jsfiddle.net/gbmo6uLp/

【讨论】：