Почему мой сайт загружается с ошибками на iPhone, хотя на Android он работает нормально? ⇐ IOS

[Anonymous]

Я разработал калькулятор с использованием React, и он отлично работает на моем компьютере, поэтому я загрузил его на страницы github. Страница на телефонах обоих моих друзей работает нормально, и они используют Android, но по какой-то причине на моем iPhone она выглядит некорректной.
Веб-страница на моем iPhone
Вот мой файл . html-файл

Код: Выделить всё

Calculator

А вот мой файл .css. Я использую Vite и React, поэтому не уверен, правильно ли я сделал, но на телефонах Android это работает. Я отправил его 4 разным друзьям с Android и 2 iPhone, и только на iPhone были прослушивания.

Код: Выделить всё

#calculator{
margin: auto;
margin-top: 100px;
overflow: hidden;
background-color: #1C1C1C;
max-width: 400px;
border-radius: 10px;
}

#keys{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 20px;
margin-bottom: -10px;
}

#display{
margin-left: 25px;
margin-right: 20px;
background-color: #1C1C1C;
color:white;
border: none;
width: 340px;
height: 70px;
margin-bottom: px;
margin-top: 20px;
padding-bottom: 0px;
text-align: end;
font-size: 70px;

}

#keys-after-zero{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding-left: 20px;
margin-bottom: 20px;
}

#zero-button{
border-radius: 80px;
width: 179px;
text-align: start;
padding-left: 34px;
}

button{
background-color: hsl(0, 0%, 31%);
border-radius: 50%;
width: 80px;
height: 80px;
border: none;
cursor: pointer;
color: white;
font-size: 35px;
}

button:active {
background-color: hsl(0, 0%, 41%);
}

.orange{
background-color: hsl(35, 100%, 50%);
}

.orange:active{
background-color: hsl(35, 100%, 40%);
}

.light-gray{
color: #1C1C1C;
background-color: hsl(60, 2%, 63%);
}

.light-gray:active{
background-color: hsl(60, 2%, 53%);
}

@media screen and (max-width: 600px){
#calculator{
max-width: 280px;
}

button{
width: 50px;
height: 50px;
font-size: 27px;
-webkit-appearance: none;
appearance: none;
}

#zero-button{
width: 118px;
padding-left: 34px;
}

#display {
width: 225px;
font-size: 55px;
height: 60px;
}
}

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
#calculator{
max-width: 280px;
}

button{
width: 50px;
height: 50px;
font-size: 27px;
}

#zero-button{
width: 118px;
padding-left: 34px;
}

#display {
width: 225px;
font-size: 55px;
height: 60px;
}
}

Я пытался изменить файл CSS, и я уже сделал @media в CSS, чтобы он отличался на мобильных телефонах, и попытался добавить -webkit-appearance: none;, но это не сработало
Если кто-то хочет открыть сайт и посмотреть, как он выглядит, вот ссылка: https://edd-estevam.github.io/Calculato ... епозиторий обновлен с учетом последних изменений, которые я сделал: https://github.com/Edd-Estevam/Calculator-react
Я пытался добавить несколько строк в CSS, который я нашел в Интернете, например @media (device-height: 568px) и (-webkit-min-device-pixel-ratio: 2){}, но это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/783 ... n-androids