The Visible Viewport Height as a CSS Variable

In a full-screen web app, the layout should fit the area that is currently visible. On mobile browsers, this area changes as browser controls move or the keyboard opens. On iOS in particular, the keyboard can reduce the visible viewport and cover content at the bottom of the screen.

window.visualViewport.height gives the height of the visible viewport in CSS pixels. By tracking it in resize events, an app can pass the measurement to CSS and adapt its layout.

function updateVisibleViewportHeight() {
  const height = window.visualViewport?.height ?? window.innerHeight;
  document.documentElement.style.setProperty("--vvh", `${height / 100}px`);
}

updateVisibleViewportHeight();
window.visualViewport?.addEventListener("resize", updateVisibleViewportHeight);
window.addEventListener("resize", updateVisibleViewportHeight);

In this example, the height is divided by 100 before it is assigned to the --vvh variable. The variable then represents one percent of the visible viewport height. CSS can multiply it by 100 and use the result, for example, as the minimum height of a full-screen view:

.full-screen-view {
  min-height: calc(var(--vvh) * 100);
}

JavaScript measures the viewport, and CSS determines how the layout uses that measurement. The same approach can be used in a PWA mobile layout when content needs to respond to changes in the visible area.