echecsfrance/hooks/useDynamicViewportUnits.ts

export const useDynamicViewportUnits = () => {
  const setVh = function () {
    var svh = document.documentElement.clientHeight * 0.01;
    document.documentElement.style.setProperty('--1svh', (svh + "px"));
    var dvh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--1dvh', (dvh + "px"));
  };

  const isMobile = function() {
    if(/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || (navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2)) {
        return true;
    }

    return false;
  }


  // SSR support
  if (typeof window === 'undefined') {
    return;
  }

  // Don't run polyfill if browser supports the units natively
  if ('CSS' in window &&
    'supports' in window.CSS &&
    window.CSS.supports('height: 100svh') &&
    window.CSS.supports('height: 100dvh') &&
    window.CSS.supports('height: 100lvh')
  ) {
    return;
  }

  // Don't run on desktop browsers
  if (!isMobile) {
    return;
  }

  window.addEventListener('resize', setVh);
  setVh();

  return () => {
    window.removeEventListener('resize', setVh);
  }
}