防止视窗调整网页大小时，android软键盘是活跃的

Preventing viewport resize of web page when android soft keyboard is active

本文关键字：android 键盘 活跃 小时 调整 网页      更新时间：2023-09-26

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

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

是否有一种方法-通过Javascript -禁用此行为或检测它，以便我可以对代码库进行更改以适应它?

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

谢谢。

好了，经过一番摸索，我找到了解决问题的办法。

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

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

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

由于移动设备浏览器没有像桌面浏览器那样的调整大小手柄，我不相信会出现这样的情况，用户会自然地模仿上述条件。

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

欢呼。

我也遇到过类似的问题。我的解决方案是使用方向改变事件而不是调整大小事件，它会在你最不期望的时候触发android:P

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

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

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

originalHeight * 100 / currentHeight给你的百分比，你可以改变高度

您可以在这里看到示例代码https://jsfiddle.net/ocg9Lus7/

更新19.11.2018

我建议你将值从动态(100%，vh等)更改为静态值后的onload窗口。如果你需要更多的动态容器，你可以通过绑定函数resize事件(originalHeight * 100 / currentHeight)来重新调整大小

您可以在这里看到一个示例代码:https://jsfiddle.net/gbmo6uLp/

相关文章：