How to calculate height of viewable area (i.e., window height minus address & bookmark bars) in mobile Safari for web app?

window.innerWidth and window.innerHeight will give the width and height of the viewport.

For anyone who comes in 2020, window.screen.availHeight is the only one that works as @Marcel Falliere's comment below.

Set the CSS height of your root container element (let's call it rootElement) to the height of the view port:

.root-element {
  height: 100vh;
}

Then, when the page did render, run this code to update rootElement height to the view port height minus the size of the browser UI bars (for example, on iOS Safari: top address bar, bottom navigation bar…):

const rootElement = document.querySelector(".root-element")
const viewPortH = rootElement.getBoundingClientRect().height;
const windowH = window.innerHeight;
const browserUiBarsH = viewPortH - windowH;
rootElement.style.height = `calc(100vh - ${browserUiBarsH}px)`;

This solution sets the size of your root container to what is available, but it also keep the possibility for the browser to adapt rootElement height when the window is resized (when used on a desktop, for instance).