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

Question

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.

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.

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?!

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.

Thanks.

Answer 1

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

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. The device is mobile
2. The percentage change in viewport width is less than 1%
3. The percentage change in viewport height is greater than 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.

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.

Cheers.