vh指定に注意？スマホビューで要素が”ガクッ”

こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。

px,%,em,rem…色々ある要素のサイズ単位。

近年ではサイトのレスポンシブも進み“vw”（Viewport Width）や“vh”（Viewport Height）といった単位も広く使われるようになったと思います。

それぞれの機能説明は↓のサイト様に任せるとして（適当）、ちょっと気になる挙動があったのでメモ書き。

• 知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る

注意？画像を含む要素の高さに”vh”を指定する場合

“vh”（Viewport Height）とは簡単に言うと表示デバイスの高さを100とした場合のサイズ単位。

この指定なんですが、スマホブラウザで表示した際にちょっとしたクセがあるようです。

スマホブラウザってブラウザによって上下にアドレスバーやメニューバーとかがありますよね？

んで、スクロールするとそのバーが引っ込んで非表示になるケースがあります。

バーが引っ込むとその分サイトの縦の表示領域が拡がります。

この時、拡がった分の表示領域がvhで高さを指定した要素に影響を与える場合があるようです。

• スマートフォンのブラウザでスクロール時に発生するresizeイベント（そしてウィンドウの縦幅に要素の高さをあわせた場合の問題）に関するメモ
• 【css】heightに100vhを設定すると、スマホでアドレスバーの高さが含まれてしまう【スマホ】

この問題、正直結構ややこしい。

しかもデベロッパーツールではバーの再現は出来ないのでいちいち実機で確認するしかないわけです。

これは大変（苦笑

ただ一つ言えることは、スマホブラウザにおけるvhは可変と考えた方が良いかもしれないということ。

ぼくが遭遇した現象は↑の見出しにある通り、画像（background-size:cover的な表示）を含む親要素にvhを指定したら、アドレスバーが引っ込むタイミングで画像サイズがガクッと変わるというものでした。

周辺のCSSやJSコードとの干渉も十分考えられますが、無理せず対象要素をvh以外の単位で指定しなおすことで解決。

ここら辺の挙動、早くブラウザ間で平準化して欲しいもんです。