javascript: Как на мобильных устройствах добиться height 100vh на первом экране?

В записи на CSS-Tricks есть код для коррекции размера vh на мобильном с событием 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`);

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

В комментариях пользователь описал проблему при использовании кода с resize – происходит скачок фонового изображения на первом экране при скролле страницы.

Там же есть код для решения этой проблемы:

var root = document.documentElement;
if (
    window.innerWidth > window.innerHeight ||
    Math.abs(this.lastHeight - window.innerHeight) > 100
) {
    root.style.setProperty(`--window-vh`, window.innerHeight + 'px');
    this.lastHeight = window.innerHeight;
}

По словам автора, как я понял, код обновляет vh только при значительном изменении высоты экрана устройства и предотвращает скачок.

Как совместить этот код с основным с resize?