How to deal with the annoying Mobile Browser Bars and ViewPort heights

We probably all have been there. We want to use some background-blend-mode or other css rules that rely on a given and not automatically calculated height (like 100%), or you simply want a background image to be a full height of the viewport – and for some reason can’t use 100%.

Usually you could resort to 100vh, which will work smoothly also with things like a background-blend-mode, however this will add an annoying vertical “scroll” when the site is viewed on mobile, because (specially the fancy iPhones) have top and bottom “bars” that are not considered to be viewport, while in fact, if we speak truth, we can’t “view” anything in those black bars. But enough of iPhone and other phone weirdness.

The solution is to use a CSS variable created with JS on the fly.

First, add this code to your head of the document, either directly or enqueued:

const appHeight = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`) window.addEventListener('resize', appHeight) appHeight()

What this code does, it listens to the window resize event, and sets a CSS variable (--app-height) with the current screen height. The visible screen, no garbage like the black bars of iPhones included. It does this whenever the window is resized, so it even works when you manually resize it, not only when the window is loaded in a phone, or else browser.

Then, listen to that created CSS variable like so height: var(--app-height);

With this you can have the same as 100%, however it will work nicely as well when using background-blend-mode, for example.