Почему mdbootstrap простая целевая страница обрезана сверху и снизу на смартфоне

#html

#HTML

Вопрос:

Очень простая целевая страница для тестирования последней версии bootstrap, похоже, корректно работает на моей машине разработки, отвечая, как и ожидалось, при изменении ширины окна браузера.

Однако на моем iPhone (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>
  

Ответ №1:

Вы проверили это в каждом браузере?

Я только что проверил это в своем POCO F1, браузере Chrome (Android), и эта страница отображается как ожидалось. Пожалуйста, проверьте, используете ли вы Safari, Chrome или любой другой, чтобы стало ясно, какой браузер создает проблему.

Комментарии:

1. Извините, я должен был дать понять, что он отлично работал со всеми браузерами на компьютере разработчика и что проблема была со смартфонами. Это был спешный мод на простую страницу, и я пропустил очевидное! Простой ответ заключается в удалении директивы style=»height: 100vh;» .