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

【问题标题】：HTML5 Audio player resizes on mobile deviceHTML5 音频播放器在移动设备上调整大小
【发布时间】：2018-08-01 04:23:57
【问题描述】：

直截了当的 HTML5 音频播放器。在台式机上看起来不错，但在移动设备上它变得有点奇怪。它保持其宽度，但会重新定位并浮动在其内部的元素上。如何阻止它在移动设备上重新定位？

希望大家能看到黄色边框供参考。

桌面打印屏幕：

移动打印屏幕：

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

移动缩放打印屏幕：

一直在尝试所有 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;
}

【问题讨论】：

能否包含确定如何在移动和桌面播放器之间切换的代码？另外，您要达到的目标还不是很清楚？阻止玩家重新定位？这些图标不应该出现在移动版本中，还是这里有什么问题？
认为我的整个帖子中都明确暗示我不希望它重新定位，所以觉得从字面上说明它太过分了。但我知道，如果您从上下文中删除每个句子，可能会非常混乱。我想，在这里发帖时应该更清楚。我不使用任何代码切换，我只是将其上传到 ftp 并在我的手机上观看。
我的意思是，如果没有源代码的至少一个可复制部分，我们就无法判断。此类问题通常是由元素重叠和自动间距引起的。您可以使用 position: relative; 强制元素的位置。属性，然后用上/下/左/右分隔它。但这是我可以在没有源代码的情况下给你的最佳答案。
好吧，我不认为这是必要的，因为它基本上只是一个 div 中的
您在哪个浏览器中看到了这个？

标签： html css mobile-safari html5-audio audio-player

【解决方案1】：

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

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

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

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

在真实设备上进行调试有点困难，但如果您有电缆，则可以将设备连接到计算机并更轻松地进行调试/测试。据我所知，播放器本身有一个设定的高度（背景红色）和一些奇怪的默认样式，可能会被覆盖，但您需要在计算机上检查才能弄清楚

【讨论】：

感谢您的回复。所以，除非有人坐在移动设备上的样式（？） - 我想最安全的选择是在移动网站上删除播放器的宽度？
您可以删除宽度并对其进行测试以查看您是否喜欢结果，但要深入了解，您需要将设备连接到计算机，以便检查页面以查看是否可以让它像桌面一样工作

【解决方案2】：

我遇到了同样的问题，因为移动设备和平板电脑上的 HTML5 音频播放器非常高。对我来说有效的解决方案就是设置.player{height=40px;}。

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

【讨论】：

【解决方案3】：

<div id="audiowrap">
  <audio controls controlsList="nodownload">
    Your browser does not support HTML5 Audio
  </audio>http://162.210.197.146:9423/
</div>`enter code here`

块引用

【讨论】：

您好，欢迎来到 StackOverflow。我们感谢您回答新旧问题，但请确保您指的是原始帖子中描述的实际问题，并解释您的建议如何以及为什么会解决它。