Skip to content

Instantly share code, notes, and snippets.

@haroldao
Created September 9, 2021 11:05
Show Gist options
  • Save haroldao/4008f2e73558a50dcf61806645782ece to your computer and use it in GitHub Desktop.
Save haroldao/4008f2e73558a50dcf61806645782ece to your computer and use it in GitHub Desktop.
Real Viewport (No more issues with the 100vh in mobile browsers)
/* Vh Calc */
// 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`);
window.setTimeout(() => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}, 1000);
// Resize
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
@haroldao
Copy link
Author

haroldao commented Sep 9, 2021

/* Vh Calc (clean code) */

const resize = () => {
  // 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`);
}

window.setTimeout(() => {
  resize()
}, 1000);

// Resize
window.addEventListener('resize', () => {
  // We execute the same script as before
  resize()
});

@haroldao
Copy link
Author

haroldao commented Sep 9, 2021

/* Vh + Vw Calc */

const calc = () => {
  // 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`);

  let vw = window.innerWidth * 0.01;
  // Then we set the value in the --vh custom property to the root of the document
  document.documentElement.style.setProperty('--vw', `${vw}px`);
}

window.setTimeout(() => {
  calc()
}, 1000);

// Resize
window.addEventListener('resize', () => {
  // We execute the same script as before
  calc()
});

@blanklob
Copy link

blanklob commented Dec 8, 2021

Wouldn't be better if you set a document ready event listener instead of set timeout just like this:

ES5

['DOMContentLoaded', 'resize'].forEach(function(event) {
  window.addEventListener(event, function() {
    var vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  });
});

ES6

['DOMContentLoaded', 'resize'].forEach(event => {
    window.addEventListener(event, _ => {
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    });
 });

@haroldao
Copy link
Author

haroldao commented Dec 8, 2021

Thanks, Youness. Good point! 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment