Help us understand the problem. What is going on with this article?

iOS版Safariで100vhがアドレスバーのせいではみ出る時の対処法

More than 1 year has passed since last update.

こんちは。見習いエンジニアの'めんた'です。

今回の私のgithubを片手にご覧ください。
一応MITライセンスです。

これまでの100vh

私は画面ピッタリのシャレオツなSPAに憧れていた。
そんな時はbodyの高さを100vhで解決!
てことで、

old-master.css
body{
    display: flex;
    flex-direction: column;

    /* これで上下ぴったりなシャレオツSPAになるはず… */
    min-height: 100vh;
}

としたのですが、iOS版Safariではアドレスバーや下部のUIのサイズが計算されないようで、フッター部分がはみ出る事件が発生…

従来型サンプルページ

JSで解決できると思い、調べてみたがjQueryを使ったものがほとんど。
宗教上の理由でjQueryは使えないので、素のJavascriptでの解決方法を模索。
なんとか解決したので、紹介します。

改良型100vh

まず、完成品はこちら

改良型サンプルページ

どうやら、Javascriptにてwindow.innerHeightを取り出したところ、正しい内側の高さを示してくれているよう…
ということは、bodyが読み込まれた後と、ブラウザのサイズが変更された(iOSの場合は、アドレスバーが表示/非表示になった)時に、window.innerHeightの値をbodyのcssに設定するだけ!

ということで、まずはmin-heightを消し…

vh-master.css
body{
    display: flex;
    flex-direction: column;

    /* コメントアウトして削除するよ!! */
    /* min-height: 100vh; */
}

 
bodyの一番下に以下のscriptを埋め込み完成!

index.html
<body>
    <!-- いろいろページの本体… -->

    <!-- bodyの一番下に記述 -->
    <script>
        // body読み込み時に一度だけbodyサイズを設定
        document.body.onload = ()=>{
            document.body.style.minHeight = window.innerHeight + 'px';
        }

        // リサイズを停止して500ms後にbodyサイズを設定
        let timeoutId;
        window.addEventListener("resize", () => {
            clearTimeout(timeoutId);

            timeoutId = setTimeout(() => {
                document.body.style.minHeight = window.innerHeight + 'px';
            }, 500);
        });
    </script>
</body>

以上でシャレオツなSPAに一歩近づきました。
それ以前にデザインセンスが絶望的なのをどうにかせねば…

あ、何か問題があればすぐにご連絡ください。

menta
Django + Vue.js によるWebアプリケーション開発経験あり。 詳細はGithubにて公開中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away