HTML5 音频播放器在移动设备上调整大小

Question

直接的 HTML5 音频播放器。在桌面上看起来不错，但在移动设备上看起来有点奇怪。它保持其宽度但重新定位并 float 在其内部的元素上。如何阻止它在移动设备上重新定位？

希望您能看到黄色边框以供引用。

桌面打印屏幕:

移动打印屏幕:

当您在移动设备上缩放时，播放器开始向其预期位置移动(并且会出现播放器控件)- 缩放得越多，它向上移动得越多，直到停在元素的中间:

移动缩放打印屏幕:

一直在尝试所有 position 值，并进行了大量的谷歌搜索。我不明白是什么原因造成的，所以我不知道从哪里开始尝试解决它。希望有人能帮忙。

HTML:

<div id="audiowrap">
  <audio controls controlsList="nodownload">
    Your browser does not support HTML5 Audio
  </audio>
</div>

CSS:

audio { margin:0 0 0 5px; width:540px; }
#audiowrap {
  margin:0 auto; border: 1px solid yellow;
}

Answer 1

目前，当我在 iPhone X 上检查时，它溢出容器，顶部有一个空格。

去掉宽度，底部的重叠就会消失

https://jsfiddle.net/yqgx97p1/9/

audio {
  margin: 0 0 0 5px;
  background: red;
}

在真实设备上调试它有点困难，但如果你有电缆，你可以将你的设备连接到你的计算机并更容易地调试/测试。据我所知，播放器本身有一个设置的高度(红色背景)和一些可能会被覆盖的奇怪的默认样式，但您需要在计算机上检查才能弄明白