ツールバーを常に表示or非表示にしたい(スマホサイト)


HTML CSS  jQuery JavaScript 等

```### 前提・実現したいこと

スマホで表示されるツールバーを非表示or常に表示させたい

### 発生している問題・エラーメッセージ

100vhに設定したヒーローイメージをスマホで表示させると、ツールバーの表示・非表示に連動し、カクカクした動きになってしまいます。

言葉で説明しづらいので動画のキャプチャを貼り付けておきます。
[リンク内容](https://www.dropbox.com/s/4wotat9n8ep1lr3/%E5%8B%95%E7%94%BB%202021-09-10%209%2054%2039.mov?dl=0)


常に表示させるか、非表示にするかで比率を保とうと考えていますが、別の方法などあれば教えていただけると助かります。


### 試したこと
**・メタタグの挿入**
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
こちらのタグは、ホーム画面からの起動時のみツールバーの非表示が適用されるみたいです。


**・Postcss 100vh fix**　→[github](https://github.com/postcss/postcss-100vh-fix)
ツールバーを常に表示させることができたのですが、写真や本文、jQueryの読み込みが遅くなり、ページ内リンクも効かなくなってしまいました。

動画キャプチャを貼り付けておきます。
[リンク内容](https://www.dropbox.com/s/3fzk80qjiqswqb1/%E5%8B%95%E7%94%BB%202021-09-10%2014%2029%2034.mov?dl=0)

```css
body {
  /* Footer will be hidden on iOS Safari because of bottom panel */
  height: 100vh;
}

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}