如何在页脚中正确定位 iOS 音频播放器？

Question

我在网页中制作了一个简单的页脚，它显示当前正在播放的曲目标题并包含默认的 HTML 音频播放器。
它在所有桌面浏览器和 Android 浏览器上呈现良好，但在 iOS 上播放器显示在页脚下方。

根据 iPhone/iPad 模型，我发现提高其位置的唯一方法是在我的 css 的媒体查询部分添加 "bottom-margin: xx%;"，但这会中断与所有其他 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*/
}}

Answer 1

您只能将 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">

如何在页脚中正确定位 iOS 音频播放器？

How to correctly position the iOS audio player within the footer?

html

css

ios

html5-audio