Html-таблица слишком широкая на устройствах iPhone

Прежде всего, позвольте мне сказать, что это мое первое веб-приложение, я не знаком с html и css, так что будьте терпеливы, если я пишу чушь.

Используя Django, я создал веб-приложение для управления бронированием теннисных кортов.
Для каждого корта есть страница, которая показывает дни текущего месяца в "календаре", созданном с помощью элемента таблицы.
В каждой ячейке есть кнопка, которая позволяет увидеть бронирования, зарегистрированные на этот день.
Все прекрасно работает на ПК и Android устройствах, но проблема возникает, когда я просматриваю свой сайт на устройствах Apple (я пробовал 2 разные модели IPhone).
На фотографиях ниже вы можете видеть, что таблица отлично изменяет размер на устройстве Android, в то время как на iPhone она слишком большая.

AndroidIPhone

Ища в интернете советы, я увидел, что кто-то предлагает правильно управлять "viewport" в html страницы, и вот что я сделал:

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">

Кто-то предлагает применять различные масштабные преобразования для изменения размеров объектов на странице для маленьких экранов.
Я также пробовал это решение, оно отлично работает на устройствах Android, но ничего не может сделать на IPhone.
Ниже то, что я сделал в моей таблице стилей.
".base" - это вся страница
".container" - div, который содержит заголовок, кнопки сверху и календарь
".calendar" - это элемент таблицы

  .container {
    width: 95%;
    background-color: transparent;
  }
  
  .calendar {
    width: 100%;
    margin: auto;
    font-size: 1em;
  }

  .calendar tr {
    border: 2px solid #fcf403;
  }
  
  .calendar th {
    padding: 0.5em;
    text-align: center;
    font-size: 1em;
    color: #fcad03;
  }
  
  .calendar td {
    border: 2px solid #fcf403;
    width: 14%;
    height: 20%;
  }

  .calendar button {
    color:white;
    width:100%;
    height:100%;
    font-weight:bold;
    font-size:1.5em;
  }
    
   @media only screen and (max-width: 320px) {
    .base { 
      transform: scale(0.85) !important;
      transform-origin: top !important;
      -webkit-transform: scale(0.85, 0.85) !important;
      -webkit-transform-origin: top !important; }
    .container { 
      width: 100% !important; }
    }
  
  @media only screen and (max-width: 360px) {
    .calendar { 
      transform: scale(0.9) !important;
      transform-origin: top left !important;
      -webkit-transform: scale(0.9, 0.9) !important;
      -webkit-transform-origin: top left !important; }
    }
  
  @media only screen and (max-width: 375px) {
    .calendar {
      transform: scale(0.95) !important;
      transform-origin: top left !important; 
      -webkit-transform: scale(0.95, 0.95) !important;
      -webkit-transform-origin: top left !important; }
    }

Любые предложения будут очень признательны... Спасибо!!!

Вернуться на верх