当android软键盘处于活动状态时，防止视口大小调整网页大小 [英] Preventing viewport resize of web page when android soft keyboard is active

问题描述

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

I'm developing a Javascript/JQuery plugin for Responsive Web Design. It has a function that monitors the viewport for changes, specifically resize and orientation. When a change is detected, a corresponding callback function is called.

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

However, I just noticed that on Android (specifically using the stock browser on a Google Galaxy Nexus), if the user tries to use the soft keyboard, it resizes the viewport, thus firing the callback function. This is behaviour I would like to eliminate.

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

Is there a way to - via Javascript - disable this behaviour or detect for it so I can make changes to the code base to accommodate it?!

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

The solutions I've seen so far have to do mainly with Android App Development and I'm not sure they apply in my case.

谢谢。

推荐答案

好吧，经过一番摆弄我发现解决我的问题。

Ok, well after some fiddling around I've found out a solution to my problem.

那么当显示/隐藏软键盘时会发生什么？！在我的测试中，视口宽度保持不变。但是，视口高度在软键盘上改变大小[（（当前 - 上一个）/上一个）* 100 ]显示为 43％（纵向）和 58％（横向）;当软键盘被 73％（纵向）和 139％（横向）隐藏时。

So what happens when the soft keyboard is shown/hidden?! In my test, the viewport width remains constant. However, the viewport height changes size [((current - previous)/previous)*100] when the soft keyboard is shown by 43% (in portrait) and by 58%(in landscape); and when the soft keyboard is hidden by 73%(in portrait) and 139%(in landscape) respectively.

所以我做的是在满足以下条件时禁用回调函数：

So what I did was disable the callback function when the following conditions are all true:

1. 设备已移动


2. 视口宽度的百分比变化小于1％


3. 视口高度的百分比变化大于35 ％

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

Since mobile device browsers do not have resize handles like on the desktop, I do not believe there will arise a situation where a user will mimic the above conditions in a natural way.

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

You can see a sample of the code here: https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419. Unfortunately, it's part of a bigger codeset, but you should be able to glean the basic idea based on the conditionals.

干杯。

这篇关于当android软键盘处于活动状态时，防止视口大小调整网页大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！