html - mdbootstrap のシンプルなランディング ページがスマートフォンで上部と下部が切り詰められるのはなぜですか

ブートストラップの最新リリースをテストするための非常に単純なランディング ページは、私の開発マシンでは正しく動作するようで、ブラウザ ウィンドウの幅が変更されたときに期待どおりに応答します。

ただし、私の iPhoneSE (IOS 13.7) では、次のようにページの上部と下部が切り詰められます。

このページ全体は、ラップトップでここで見ることができます: https://new-inn-pembridge.co.uk、これがコードです:-

<div class="container  bg-ltgreen">
  <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
    <div class="text-center">
      <h1>The New Inn, Pembridge</h1>
      <img class="img-fluid" src="img/newinn.jpg" />
      <h5 class="pt-3" style="color: rgb(114, 7, 7);">A brand new website is under construction here.</h5>
      <p class="pb-5" style="color: rgb(114, 7, 7);">Have another look about the end of September!</p>
    </div>
  </div>
</div>

すべてのブラウザで確認しましたか?

POCO F1、Chrome ブラウザ (Android) で確認したところ、このページは期待どおりに表示されています。 Safari を使用しているかどうかを確認してください。hrome またはその他のブラウザを使用して、どのブラウザが問題を引き起こしているかを明らかにします。

1

申し訳ありませんが、開発マシン上のすべてのブラウザで完全に動作し、問題はスマートフォンにあることを明確にすべきでした。シンプルなページに急遽追加した MOD だったので、明らかな部分を見逃していました。簡単な答えは、style="height: 100vh;" を削除することです。ディレクティブ。

2020 年 9 月 4 日 8:49