CSS: Are view height (vh) and view width (vw) units widely supported?

Question

I\'m using 100vh to center a div vertically with line-height. This site puts support for vh and vw at around 70%, is that a fair assessment? Would you recommend using viewpo

Answer 1

Here is a nice simple JS script I use to make sure vh units will work on all browsers (A few months ago I saw this and been using it since then)

// 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`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

I believe the same approach could be used for other purposes as well.