100vhに指定しているのにスクロールが出てしまう原因と改善策

HTML、CSSのコーディングをしていて、htmlタグにheightを100vh指定して、スクロールが出ないようにしたいのに、iPhoneやiPadで確認すると、なぜかスクロールが出てしまう、どころか、なんか数ピクセル上に上がって表示されてしまう現象が開発していて起こりました。

この時の解決法を残します。

現象

htmlタグをcssでheightを100vhに指定する。

style.css

html {
    max-height: 100vh;
}

ブラウザのデバッグモードでは、スクロールはでず、きちんと想定内の表示が確認できる。

iOS端末のsafariやChromeアプリではなぜかスクロールバーが出てしまう！

原因

iOS端末は上部（もしくは下部）のアドレスバー込みが100vhとして計算されてしまっているため。

改善策

下記にサンプルコードを示す。
jsを組み合わせることによって実現できる。（なお、jqueryを用いています）

style.css

html {
    max-height: calc(var(--vh, 1vh) * 100);
}

index.js

$(function () {
    // windowの高さの1/100を取得する
    const vh = $(window).height() * 0.01;
    // cssの--vh要素に画面から取得した1px分を代入する
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

ざっくりコードの解説をします。

jsでwindowの高さを取得し、その1/100をsetPropertyでcssの変数に渡して、cssのcalcを利用して、100倍した高さが、100vhと同等になります。

。。。？？？

jsで1/100倍して、cssに渡して100倍する。。。？

なんかおかしくない...と思うかもしれないが、
これで確かに、100vhが適用されている。

まとめ

どういうロジックかはわからないが、これでうまくいくことは確認できているので、
とりあえずは、そのままコピペで使用できます。

他に良い方法があれば教えていただきたいです。

この現象で半年悩みましたので、こちらで共有して他の人の役に立てればと思っております。

読んでいただきありがとうございました。