【CSS】iOSのSafariでアドレスバーが表示されていてもページを画面100%にする

まだ実際に試してはいないのですが、今後使いそうだと思ったので備忘録としてまとめ。
iOS の Safari でアドレスバーが表示されている状態でも、ページの高さを 100% にする方法についてです。
確かに、スマートフォンで Web ページを表示した時、アドレスバーが面倒なんですよね…！

偶然見つけたサイトはこちら。

これからはこの実装がオススメ！ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック | コリス
https://coliss.com/articles/build-websites/operation/css/css-cover-the-entire-height-of-the-screen.html

CSS はこちら。

html {
  height: -webkit-fill-available;
}
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

上記のように CSS を記述することで、iOS の Safari で表示した際に、画面の縦幅いっぱいに表示できるとのことでした。
今はアプリ開発がメインなので、アドレスバーとか全く考慮しないで済んでいるのですが、機会があったら使ってみようと思います！

ただ、場合によっては height: -webkit-fill-available; が Google Chrome で影響があるかも？という記事も見ました。
その場合は、下記のように記述し、Safari で表示されたときだけ有効になるようにした方が良いかもしれません。

@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }
  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

試していないのでわかりませんが…ブラウザ毎の違いについては十分注意したいですね。

以上、iOS の Safariでアドレスバーが表示されていてもページを画面 100% にする方法についてでした。
ご参考になれば幸いです。