スマホのアドレスバーの高さを調節する方法

スマホのアドレスバーの高さを調節する方法

こんなご相談でありませんか？

たまにコーディングで、ブラウザ縦横いっぱいに広げるwebサイトをお願いされた事があります。
方法としては２パターンが考えられます。

実装したコード

sample.html

    <section class="p-mainVisual">
     <!-- 要素内 --> 
    </section>

sample.css

    /* 100%でやる方法 */
    html,body {
        height: 100%;
    }
    .p-mainVisual {
        height: 100%;
    }

    /* 100vhでやる方法 */
    .p-mainVisual { 
        height: 100vh;
    }

しかし、100vhでやる方法には落とし穴があります。それがスマホのアドレスバーの高さです。
フルスクリーンレイアウトは、ビューポートの高さの割合でスマホのアドレスバーも高さに含まれます。
それによりAndroid系やSafariのアドレスバーがある事にサイトのズレが生じます。

では100vhの時の高さの調節を解決する方法を１つご紹介します。

JavaScript (jQuery)で対応、実装したコード

sample.js

    // スマートフォンで全画面表示
    $(document).ready(function () {
        var hSize = $(window).height();
        $('.p-mainVisual').height(hSize); // アドレスバーを除いたサイズを付与
    });
    $(window).resize(function () { // ページをリサイズした時の処理
        var hSize = $(window).height();
        $('.p-mainVisual').height(hSize); // アドレスバーを除いたサイズを付与
    });

.resizeメゾットと$(window).height();を使用して高さの値をとって、スマホのアドレスバーの分の高さをリサイズしてくれます。

まとめ

コーダー、マークアップエンジニア、フロントエンドエンジニアさんは、パソコンで作業するためスマホで実機確認した際に『えぇ？』となる事が多いですが、スマホのアドレスバーの高さまで意識まで回らないと思います。
これを機会にスマホのアドレスバーの高さ意識してコーディングしてはいかがでしょうか？！