javascriptmobileheightviewportaddress-bar

How to get viewport height, on mobile, independent from the current hide/show state of URL bar?

On mobile (e.g. Chrome on Android) the viewport height changes depending on whether the URL/Address bar is hidden or not, which changes depending on whether you're scrolling up or down on the page.

Given this, I need 2 variables:

  1. Viewport height if URL bar were showing (regardless of actual state).
  2. Viewport height if URL bar were not showing (regardless of actual state).

In other words: "min" and "max" viewport heights. How would I go about doing that? I only know how to get:

By doing: Math.max(document.documentElement.clientHeight, window.innerHeight || 0) (source: https://stackoverflow.com/a/8876069/473368).

Solution

  • For this, use the window.outerHeight property:

    Window.outerHeight gets the height in pixels of the whole browser window. It represents the height of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.

    To expand your function, just compare window.outerHeight and window.innerHeight:

    let maxHeight = Math.max(window.innerHeight || 0, window.outerHeight || 0);
let minHeight = Math.min(window.innerHeight || 0, window.outerHeight || 0);
console.log(maxHeight, minHeight);