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

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を取得して、
その値が変更された場合のみリサイズするという方法をとります。

そうすることで、アドレスバーが出たり入ったりしてもリサイズされることがありません。

JavaScript

Posted by devsakaso