スマホで100vhがはみ出るときの対策（ios,android)

2022年2月4日JavaScript

100vhを設定しても、スマホで確認すると100vhよりはみ出るときがあります。 とくにiosなどではアドレスバー部分の影響で100vhなのに100vhにならないことがあります。 その場合の対策を紹介します。

100vhがスマホではみ出るときの対策

以下のJavaScriptとcss

HTML

<section id="top">
  ここにコンテンツ
</section>

コンテンツやidは参考です。

CSS

#top {
  height: 100vh; /* Fallback */
  height: calc(var(--vh, 1vh) * 100);
}

下のheightが本命で、JavaScriptで–vhというcss変数の値をデバイスごとに決定させます。 上のheightは、calc部分に対応していない場合のための予備です。

JavaScript

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

// ここからリサイズの対応
let vw = window.innerWidth;
window.addEventListener('resize', () => {
  if (vw === window.innerWidth) {
  // 画面の横幅にサイズ変動がないので処理を終える
    return;
  }

  // 画面の横幅のサイズ変動があった時のみ高さを再計算する
  vw = window.innerWidth;
  setFillHeight();
});

// 実行
setFillHeight();

JavaScriptの解説

考え方としては、 デバイスの高さを取得して、そこから1vhの値を算出することで、 どのデバイスでも100vhをはみ出ることなく正しく表示させるというものです。 まずconstから始まる部分でsetFillHeightという関数を定義します。 デバイスの高さは、window.innerHeightで取得できるので、それをパーセントの値に変換します。それが、1vhとなります。 あとは、その1vhの値をcssの変数の値として適用させることで1vhがデバイスごとに反映されます。

リサイズの解説

スマホではiosなどデバイスでは、スクロールすると、 アドレスバーが表示されたり非表示になったりします。 その関係でビューポートの高さ、つまり表示されるコンテンツの画面の高さが変更されます。 高さが変化した場合でもリサイズしたい場合は、

window.addEventListener('resize',setFillHeight);

でOKです。 ただ、それだと100vhがスクロールするたびに変化するので、 それは避けたいという場合、上の例のようにwindow.innerWidthを取得して、 その値が変更された場合のみリサイズするという方法をとります。 そうすることで、アドレスバーが出たり入ったりしてもリサイズされることがありません。