Question

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

希望你能看到黄色边框作为参考。

桌面版画屏幕：

enter image description here

移动彩屏：

enter image description here

当您放大移动设备时，播放器开始向其预期位置移动（并显示播放器控件） - 缩放的越多，向上移动的越多，直到在元素中间停止：

移动缩放版画屏幕：

enter image description here

尝试了所有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上检查时，它在容器上溢出，顶部有一个空格。

删除宽度，底部的重叠将消失

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

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

Answer 2

我遇到了同样的问题，因为手机和平板电脑上的HTML5音频播放器很高。在我的情况下，有效的解决方案只是设置.player{height=40px;}。

这解决了我在移动设备上拥有超大型播放器的问题。