How to get keyboard height on a web app

Question

This is for a web app, targeting any mobile browser but mainly Chrome and Safari for iOS10. The browser opens the built-in keyboard when the user clicks on any input, which is fine, but I am trying to resize/relocate the items more relevant to the user at that point in time.

Is there anyway to calculate the height of the keyboard so that I can adjust items accordingly? Generic solution would be better, as inputs may open different types of keyboard (text, numeric...) but hard coding options are also a valid response at this stage.

I have tested around window.screen, window.innerHeight and so on to no avail...

Thanks!

Answer 1

There is a web standards to tackle this issue.

The Visual Viewport API, which also allows to listen to the resize event.

The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.

visualViewport.addEventListener('resize', () => {
  const h = event.target.height
  …
});