gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:08:11 25 4
gpt4 key购买 nike

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

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

桌面打印屏幕:

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;
}

最佳答案

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

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

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

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

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

关于HTML5 音频播放器在移动设备上调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48908437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com