【JavaScript】スマホの画面いっぱいに要素を表示する方法｜100vhが効かない原因とdvh・–vhカスタムプロパティ・svh/lvhの使い分けまで解説

.hero {
  /* 古いブラウザ向けフォールバック */
  height: 100vh;
  /* dvh に対応していれば上書き */
  height: 100dvh;
}

/* ヒーローセクション：常に「欠けない」画面いっぱい */
.hero {
  min-height: 100vh;       /* フォールバック */
  min-height: 100svh;      /* UIバーあり状態でも欠けない */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 全画面モーダルオーバーレイ */
.modal-overlay {
  position: fixed;
  inset: 0;                /* top:0 right:0 bottom:0 left:0 の一括指定 */
  width: 100%;
  height: 100dvh;          /* 現在の表示領域ぴったり */
  background: rgba(0, 0, 0, 0.5);
}

/**
 * window.innerHeight を CSS カスタムプロパティ --vh に設定する
 * iOS Safari で 100vh が正しく計算されない問題の回避策
 */
function setViewportHeight() {
  // 1vh 相当のピクセル値を算出
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初回実行
setViewportHeight();

// リサイズ時・向き変更時に再計算
window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', () => {
  // orientationchange 直後は innerHeight がまだ更新されていない場合がある
  setTimeout(setViewportHeight, 100);
});

.full-screen {
  /* フォールバック：vh が正しく動作する環境用 */
  height: 100vh;

  /* --vh が設定されていればこちらを使う */
  height: calc(var(--vh, 1vh) * 100);
}

/* min-height 版 */
.hero {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}

function setViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// デバウンス：連続イベントをまとめて1回だけ実行
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

// 初回
setViewportHeight();

// resize はデバウンス付き（150ms 後に実行）
window.addEventListener('resize', debounce(setViewportHeight, 150));

// orientationchange は 300ms 待つ（値が安定してから取得）
window.addEventListener('orientationchange', () => {
  setTimeout(setViewportHeight, 300);
});

.full-screen {
  height: 100vh;                      /* 標準フォールバック */
  height: -webkit-fill-available;     /* iOS Safari 向け（非推奨） */
  height: 100dvh;                     /* 現行の推奨 */
}

.full-screen {
  /* 1. 最古のブラウザ向けフォールバック */
  height: 100vh;

  /* 2. JS が実行されたら --vh カスタムプロパティを使う（iOS 15.4 未満も対応） */
  height: calc(var(--vh, 1vh) * 100);

  /* 3. dvh 対応ブラウザではこちらが優先（@supports で上書き） */
}

@supports (height: 100dvh) {
  .full-screen {
    height: 100dvh;
  }
}

<!-- ヒーローセクション -->
<section class="hero">
  <h1>キャッチコピー</h1>
  <p>サブテキスト</p>
</section>

<!-- 全画面モーダル -->
<div class="modal-overlay" id="modal" hidden>
  <div class="modal-content">
    <button class="modal-close">閉じる</button>
    <p>モーダル内容</p>
  </div>
</div>

/* ヒーローセクション：svh で欠けを防ぐ */
.hero {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@supports (min-height: 100svh) {
  .hero { min-height: 100svh; }
}

/* モーダルオーバーレイ：dvh で現在の画面ぴったり */
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

@supports (height: 100dvh) {
  .modal-overlay { height: 100dvh; }
}

.modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

// --vh カスタムプロパティを設定（デバウンス付き）
function setVh() {
  document.documentElement.style.setProperty(
    '--vh', `${window.innerHeight * 0.01}px`
  );
}
setVh();
window.addEventListener('resize', debounce(setVh, 150));
window.addEventListener('orientationchange', () => setTimeout(setVh, 300));

function debounce(fn, ms) {
  let t;
  return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };
}

// モーダル制御
const modal = document.getElementById('modal');
document.querySelector('.modal-close').addEventListener('click', () => {
  modal.hidden = true;
});