2

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:

  • Viewport height given current state of URL bar (showing/not-showing).

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

01AutoMonkey
  • 2,515
  • 4
  • 29
  • 47
  • I guess that is only possible in the native programming language of the mobile. %)P Other idea, go and collect the `data` when ever possible. Think of user somewhen scrolls up and down. And the corresponding behaviour of the `URL-Bar`. – deEr. May 27 '18 at 15:27

1 Answers1

1

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);
Luca Kiebel
  • 9,790
  • 7
  • 29
  • 44
  • 1
    This just gives you **current-viewport-height** and **whole-window-height**. What I actually need is **viewport-height-without-url-bar** and **viewport-height-with-url-bar**. **whole-window-height** _is not_ **viewport-height-without-url-bar**. – 01AutoMonkey May 30 '18 at 21:44