Question

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

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

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

到目前为止，我看到的解决方案主要涉及Android App开发，我不确定它们是否适用于我的情况。

感谢。

Answer 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。不幸的是，它是更大代码集的一部分，但你应该能够根据条件收集基本思想。

干杯。

Answer 2

我有类似的问题。我的解决方案是使用方向更改事件而不是调整大小事件，当你最不期望它在android上时触发它：P

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

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

Answer 3

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

originalHeight * 100 / currentHeight为您提供可以更改高度的容器的绝佳选择

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

更新2018年11月19日

我建议您在onload窗口后将值从动态值（100％，vh等）更改为静态值。如果您需要更多的动态容器，则可以通过对resize事件（originalHeight * 100 / currentHeight）附加功能来缩小尺寸

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

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

3 个答案: