Get viewport height when soft keyboard is on

Question

I've been trying to make this work for days now, with no luck, so I thought I'd share info and maybe someone comes up with a solution.

I want to get the exact viewport size when the soft keyboard is up. I am currently using the following code on the header in order for the site to be responsive:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

What I realized is that when the soft keyboard comes up, it uses the device height as the viewport height and pushes the rest of the site upwards - which makes me assume that it's getting it's height from the width=device-width option.

Using the following code after initiating the soft keyboard:

setTimeout(function() {       viewport = document.querySelector("meta[name=viewport]");     viewport.setAttribute('content', 'height=auto'); }, 300) 

And then getting the height using jquery shows CORRECT results on Android - aka the visible viewport size WITHOUT the virtual keyboard, but not on iOS. I am getting a random number, which I assume stems from the rest of the meta tag not existing, so I am getting a zoomed-in version of the website along with a number like 75 or 100 (on iphone 4s)

I also tried creating a fixed element after bringing the keyboard up, making it use the viewport height with top:0; and bottom:0; attributes, but I still get the original height.

What comes closer to this, is setting the viewport meta tag height to a fixed value, that can be picked up by jquery's $(window).height(), which means that the meta tag actually makes a difference after initiating the keyboard, but there is no true value for a fixed height.

I've seen lots of topics around this, but none with a solution. Anyone that has a solution for this?

Answer 1

In the view I wanted to take the height of the remaining screen after the virtual keyboard was on, I was using an absolutely overflown element that covered the whole screen using screen height and the content of the whole page was inside of it. As a result, the virtual keyboard was opening on TOP of the overflown element, without changing its dimensions.

To fix the specific problem, all I had was change the position of this element to static and remove the overflow when the virtual keyboard was opened - actually ios changes to THIS behaviour by default when issuing he virtual keyboard (changes elements to static position) and this is why the fixed elements become static.

I hope this helps.