Стилизация не применяется на мобильных устройствах ⇐ Javascript

[Anonymous]

У меня были проблемы с аудиозатоками. Прежде всего, я думаю, что это позор, насколько вы ограничены стилем управления. Я сделал их в некотором роде для своего сайта и доставил его в то место, которым я доволен. На Expect Element, когда я меняю его на мобильные измерения, он выглядит совершенно нормально. Однако, когда я фактически развернул сайт, стили не появляются на мобильных устройствах. Аудио элементы управления все еще там, и я могу воспроизводить звук, они просто не применили стиль < /p>
Вот мой код. < /P>
.cs-audio {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
justify-content: center;
}

.cs-audio-item {
position: relative;
display: block;
}

.cs-audio-title {
font-size: calc(16 / 16 * 1rem);
line-height: 1.2em;
margin: 0;
position: absolute;
z-index: 100;
top: 5px;
left: 50%;
transform: translateX(-30%);
}

audio::-webkit-media-controls-play-button {
background-color: var(--primaryLight);
border-radius: 50%;
}

audio::-webkit-media-controls-play-button:hover {
background-color: #b1d4e0b3;
}

< /code>


Commercial




Narration




Interactive




Animation





< /code>
I tried testing my code on the dev mode's inspect element and changing the dimensions to mobile and they look completely fine so I don't think it's a CSS issue. When I deployed the site I also went to inspect element and the styles are still there. It is only when I checked on my iphone that I saw that the styling was gone on the audio controls. I tried both safari and chrome, neither of them have the styling.
here's what it looks like on codepen:
https://codepen.io/JreyIV/pen/vEYXejd
you can see that the styling works there too.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -on-mobile