Как правильно расположить аудиопроигрыватель iOS в нижнем колонтитуле? - PullRequest
Новая
       9

Как правильно расположить аудиопроигрыватель iOS в нижнем колонтитуле?

1 голос
/ 25 сентября 2019

Я сделал простой нижний колонтитул на веб-странице, которая отображает название воспроизводимой в данный момент дорожки и содержит аудиоплеер HTML по умолчанию.
Он хорошо отображается во всех браузерах для настольных ПК и в Android, но в iOSигрок отображается ниже нижнего колонтитула.

Единственный способ поднять свою позицию - это добавить "нижнее поле: xx%;"в разделе медиазапросов моего css, в соответствии с моделью iPhone / iPad, но это нарушает совместимость со всеми другими мобильными телефонами Android, так как теперь поднятый плеер закрывает название трека.

Вопросы:
1) Почему на iOS с "bottom: 0;"div кажется нормальным, а плеер - нет?
2) Если это не какой-то WebKit, есть ли способ поднять плеер только на устройствах iOS?

соответствующая часть HTML: 

<div id="track-info">
  <p>Now playing: <span id="track-title">Please select a radio stream</span></p>
  <audio id="radio-js" class="radio-player" controls>
    <source src="" type="audio/mpeg">
  </audio>
</div>

Соответствующая часть CSS, которая должна быть приемлемой даже для мобильных телефонов: 

/* global */
#track-info {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-top: 30%;
    padding-bottom: 2%;
    background-color: blue;
}
.radio-player {
    position: inherit;
    width: 100%;
    left: 0;
    bottom: 0;
}

Дополнительный CSS, который я добавил для просмотра проигрывателя на некоторых iPhone 

/* media query for portrait devices */
@media only screen and (orientation: portrait) {
.radio-player {
    position: inherit;
    width: 100%;
    left: 0;
    bottom: xx%; /* 3.5% for iPhones 5/5c/5s and 4.7% for iPhones 6/6s*/
}}

1 Ответ

0 голосов
/ 25 сентября 2019

Вы можете настроить таргетинг только на устройства iOS с помощью css.Поместите это в ваш файл CSS: 

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    /* CSS overrides for mobile here */
}

В заголовке вашего HTML-файла: 

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