iOS高さ問題　解決策

今更ながら・・・サイトのトップページを画像等で全画面表示にした場合、100vhで指定するのだが、iPhone　safariの場合画面下部にUIが出ていてその分が100vhに含まれているため一部が隠れてしまう。これをを回避するためのcssが以下。いずれこれも効かなくなる場合あり。

.mv {
    height: 100vh;
    background: purple;
}
@supports (-webkit-touch-callout: none) {
    .mv {
        height: -webkit-fill-available;
    }
}

と、ここまで書いて新たな展開発見！
safariに特化しているが
height: 100vh;
の部分を
height: 100dvh
とすることで解決らしい。しかし他のブラウザでは機能しないので

<div style="height: 100vh; height: 100dvh"></div>

とすること。