vhを使う際にはモバイルのアドレスバーに注意

Google Chromeのモバイル版でvhが思い通りに使うことが出来なくて調べました。

vhではなく%で対応できるのであれば%を使った方が以下のような問題が起きないので楽です。

webページをPCで開発していると問題なかったのですが、自分のスマホ端末で確認すると予定位置とずれて要素が表示されてしまい、困りました。

ちょうどブラウザのアドレスバーくらいのずれている気がしたので調べてみたところカスタムプロパティを使用したThe trick to viewport units on mobileにたどり着きました。

CSS のカスタムプロパティ (変数) の利用
カスタムプロパティ (--*): CSS 変数

js

// --vhというカスタムプロパティを作成
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
// window resize
window.addEventListener('resize', () => {
    vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

css

/* カスタムプロパティ未対応ブラウザ対応 */
height: 100vh;
/* 100vh --vhが未定義の場合は1vhを使う */
height: calc(var(--vh, 1vh) * 100);

とりあえずPCと自分のandroid端末では問題なく動作しました。