23

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

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

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

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

谢谢。

4

3 回答 3

5

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

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

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

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

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

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

干杯。

于 2013-06-19T20:49:39.673 回答
0

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

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

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

于 2014-02-03T13:30:42.077 回答
0

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

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

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

更新 19.11.2018

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

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

于 2018-11-18T09:56:44.247 回答