How to fix vh(viewport unit) css in mobile Safari?

Question

I\'ve used vh (viewport units) css in one of my projects but in mobile safari it doesn\'t work. It seems like Safari doesn\'t know what to do with vh, but it works fine in o

Answer 1

There's a pretty good answer to this across at CSS Tricks - https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);