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.

Answer 2

I had a similar problem. And my solution was to use the orientation change event instead of the resize event which triggers when you least expect it on android :P

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

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

Answer 3

I can share you with my pretty code. I was setting trigger on resize event and counting height relative to before resize event.

originalHeight * 100 / currentHeight give you precent wich you can change height container

You can see a sample of the code here https://jsfiddle.net/ocg9Lus7/

UPDATE 19.11.2018

I recomend you change value from dynamic (100%, vh etc.) to static value after onload window. If you need more dynamic container you can reculclate sizes by bynding function to resize event (originalHeight * 100 / currentHeight)

You can see a sample of the code here: https://jsfiddle.net/gbmo6uLp/