【iPhone画面開発】Safariで高さを vh指定するのは危険⚠️

最近iPhone画面を開発しております。
開発が完了し、実際にアプリをデプロイ。
それをSafariで確認すると、なんと高さがうまくあわない、、という事象が発生しました。
ただし、GoogleとかLineからアプリを確認しても問題ない。。。

Safariが悪いんだなあと思いながら色々調べてみると、対応策が見つかりました。

何が起こっているのか

下の図のようにSafariでWebを開くと、画面上部と画面下部にiPhone特有のエリアがあります。
私の場合、cssでheightをvh指定することで、画面いっぱいに伸ばし、はみ出すとスクロールバーを表示、という想定でしたが、SafariではiPhone特有のエリアを含んだ状態でfitするようになってました。

ちなみにvhは「viewport height」の略で、vhを100vhとすることでviewport全体を覆うことが可能です。

対応

対応ですが、vhではなく別のviewportの単位dvhを使い解決できました。

// 全体を囲うスタイル用class
.container {
    // この指定だけでOK
    height: 100dvh;
}

dvhはDynamic Viewpoerの略で、動的に画面が拡大、縮小される原因となるパーツ（Safariの下のエリアなど）が画面の中に入ると、それを動的に考慮してviewportサイズを調整してくれるとのこと。

原因は不明ですが、Safariではvh指定をすると下のパーツなどを考慮してくれないっぽいので気をつけたいですね。
調べてみると、他にもlvh,svhなどがあるそうで、もしかするとvhの指定自体を使うべきではないかもしれませんね。

Safariさん、勘弁してください。。

以上。