スマホで100vhが画面高さいっぱいにならない時の対処法

<div class="spacer"></div>
<!-- 100vhを指定する要素 -->
<div class="box --vh">
  <div class="item --top">90%</div>
  <div class="item --bottom">10%</div>
</div>
<div class="spacer"></div>
<!-- 100dvhを指定する要素 -->
<div class="box --dvh">
  <div class="item --top">90%</div>
  <div class="item --bottom">10%</div>
</div>

.box {
  color: #fff;
  font-size: 32px;
}
 
/* 100vhを指定する要素 */
.box.--vh {
  align-items: center;
  height: 100vh;
}
 
/* 100dvhを指定する要素 */
.box.--dvh {
  height: 100dvh;
}
 
.item {
  align-items: center;
  display: flex;
  justify-content: center;
}
 
.item.--top {
  background-color: #34d276;
  height: 90%;
}
 
.item.--bottom {
  background-color: #2cb5b9;
  height: 10%;
}
 
.spacer {
  background-color: #e4e4e4;
  height: 500px;
}

<div class="spacer"></div>
<!-- カスタムプロパティ + JavaScript -->
<div id="custom" class="box --custom">
  <div class="item --top">90%</div>
  <div class="item --bottom">10%</div>
</div>
<div class="spacer"></div>

.box {
  color: #fff;
  font-size: 32px;
}
 
/* カスタムプロパティ + JavaScript */
.box.--custom {
  height: 100vh; /* フォールバック */
  height: calc(var(--custom, 1vh) * 100);
}
 
.item {
  align-items: center;
  display: flex;
  justify-content: center;
}
 
.item.--top {
  background-color: #34d276;
  height: 90%;
}
 
.item.--bottom {
  background-color: #2cb5b9;
  height: 10%;
}
 
.spacer {
  background-color: #e4e4e4;
  height: 500px;
}

const setCustomHeight = () => {
  const customVhElement = document.getElementById("custom") // 対象の要素を取得
  const customVh = window.innerHeight * 0.01 // 画面高さを取得
  customVhElement.style.setProperty("--custom", `${customVh}px`) // カスタムプロパティに値を入れる
}
 
// 画面にリサイズがあった時に処理を実行
window.addEventListener("resize", setCustomHeight)
 
// 処理の初期実行
setCustomHeight()