モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」の紹介

要素の高さをビューポートに吸着させる手段として、100vhが最適解ではあるが、モバイルブラウザにおいては悩ましい点があることをご存知だろうか。

モバイルブラウザには、URLを表示するアドレスバーとタブ切り替え操作等のコントロールバーが備わっている。これらはそれぞれスクリーン上部と下部に配されていて、ユーザーの操作によって現れたり隠れたりするわけだが、100vhとするとバーが隠れた状態のビューポートを認識してしまう。この状態でバーが出現するとページ下部に重なる具合になる。想定としてはページ下部に続いてコントロールバーが出てほしいにも関わらずだ。

この事象を解決してくれるReactコンポーネントがある。

このエントリーでは、モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」を紹介したい。

react-div-100vh について

react-div-100vhは、モバイルブラウザのビューポート100vh問題を回避するReactコンポーネントだ。アドレスバーとコントロールバーがある状態のビューポートを認識することで、ページ下部にコントロールバーが重なる見苦しさを回避してくれる。

https://github.com/mvasin/react-div-100vh

インストール

$ npm install react-div-100vh --save
# or
$ yarn add react-div-100vh

設置

import Div100vh from 'react-div-100vh';
​
function MyComponent () {
  return (
    <Div100vh>
      ...
    </Div100vh>
  );
}

デモンストレーション

<div style={{height:100vh;}}>のとき

<Div100vh>のとき

まとめ

モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」の紹介だった。

react-div-100vhは、レンダリング前にwindowサイズを計算して高さを明示しているようだから、表示された後にチラつくような動作はないだろうと思う。またこの回避策はReactアプリに限ったことではなく、通常のコーディングでも活用できるもので、ビューポートに吸着させる要素にwindow.innerHeight値を与えれば、同様のことが果たせるはずだ。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。