html、css、js

<div class="fv">
  <!-- ここにファーストビューのコンテンツを入れる -->
</div>
/* SPでアドレスバー再計算されるので、FVとかに設定したらダメ */
.fv {
  min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
  min-height: calc(var(--vh, 1vh) * 100);
}

/* 再計算しないのはこっち */
.fv {
  min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
  min-height: calc(var(--vh2, 1vh) * 100);
}
// sp 100vh
//=====================================================
// リサイズ対応
// 関数定義
function setHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// 初期化
setHeight();
// ブラウザのサイズが変更された時・画面の向きを変えた時に再計算する
window.addEventListener('resize', setHeight);

// 1回のみ取得
// 関数定義
function setHeight2() {
  const vh2 = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh2', `${vh2}px`);
}

setHeight2();

以下に詳しく書かれてる

https://web-dev.tech/front-end/javascript/setting-100vh-with-css-js/