【JavaScript】スマホの画面いっぱいに要素を表示する方法 100vhだけではうまくいかない！？

スマートフォンの画面いっぱいに要素を表示する際に、アドレスバーやタブバーを考慮する必要があります。これらのバーは画面の一部を占めてしまうため、100vhだけではうまくいかないことがあります。以下は、アドレスバーやタブバーを考慮した画面いっぱいに要素を表示する方法です。

スポンサーリンク

サンプルコード

JavaScriptを使用して、ビューポートの実際の高さを取得し、それを用いて要素の高さを設定します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        
        .full-screen-element {
            height: 100vh; /* Fallback for browsers that do support vh units */
            height: calc(var(--vh, 1vh) * 100);
            background-color: #f0f0f0; /* Just for visualization */
        }
    </style>
</head>
<body>
    <div class="full-screen-element"></div>

    <script>
        // Set the --vh custom property to the actual viewport height
        function setViewportHeight() {
            const vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        }

        // Set initial height on page load
        setViewportHeight();

        // Update height on window resize
        window.addEventListener('resize', setViewportHeight);
    </script>
</body>
</html>

上記の例では、–vhというカスタムプロパティを使用して、calc関数で実際のビューポートの高さを取得しています。

よくある質問（FAQ）

Q. スマホでviewport高さ(100vh)が正しく動作しない問題の原因は？
A. モバイルブラウザのアドレスバーやナビゲーションバーが100vhに含まれないためです。実際の表示領域より大きく計算され、コンテンツが隠れることがあります。
Q. スマホでの正確な画面高さを取得するには？
A. CSS変数 –vh を使う方法が一般的です。window.innerHeightをJavaScriptで取得し、document.documentElement.style.setProperty(“–vh”, window.innerHeight/100 + “px”)で設定します。
Q. CSS dvh単位とは何ですか？
A. dvh（dynamic viewport height）はアドレスバーの表示・非表示に応じて動的に変化するビューポート単位です。モダンブラウザで使えるため、JavaScriptなしでスマホの高さ問題を解決できます。