Question

我的<audio>标签在iOS Safari，Firefox和Dolphin浏览器上发生以下问题，但在任何OS浏览器上均未； =音频控件随着zoom +向上移动并最终与对象重叠在它上面。

静态布局（无需缩放）非常棒……缩放将所有内容扔到悬崖上。

FWIW，我确实弄乱了meta“ viewport”标签，但是没有运气。

<audio>对象位于布局的底部。它遵循我的css代码，但缩放时除外。当我通过缩小进行缩放时，对象会向上移动并与它上方的<section>重叠。

html {
    font-size: 20px;     /* baseline for all descendants */
    font-size: 2.5vw;
}

.caroler {
    text-align: center;
    font-size:  1.70em;
    color:      blue;

    padding-bottom: 1.0em;
}

.aSongControl {
    display: block;      /* center ... */

    margin: 0 auto;

    width:  90%;         /* squeeze width because of .content's rounded corners */

    font-size: 120%;     /* for non-support text ... */
    color:     #990099;
}

/*
    This is the audio control-specific Selector.
    Other Selectors handle position and sizing.
*/
audio {
    background-color: white;
}

#theSong {
    /*
        deliberately empty just to initialize
        certain <audio> parms, e.g., the volume
    */
}

<meta name="viewport" content="width=device-width, initial-scale=1">
Inside <body>

<section class="caroler">
as sung by an unknown Caroler<br>
in front of the White House<br>
on December 24th, 2018
</section>

 <audio id="theSong" class="aSongControl" controls preload="auto">
    <source src="audio/Lafayette_Square.m4a" type="audio/mp4">
    <a href='http://www.apple.com/quicktime/download/' title='Get Quicktime' onclick='window.open(this.href); return false'>
    Install Quicktime to hear this awesome Hymn
    </a><br>
 </audio>
<audio>

卡斯特将军可能大喊“ HAALP！”

要添加的新操作：

1）强烈建议下方的读者通过对<meta>标签进行少量更改来禁用缩放。足够简单，但是我只能回应STO的另一位成员所说的话：“禁用缩放功能不是很好，特别是对于那些依赖此功能的用户。”

2）无论如何，让我们继续。我已经“退缩”到使用JS，放弃了视口单位vw和vh：

document.body.setScaledFont = function(f) {
    var s = this.offsetWidth, fs = s * f;
    this.style.fontSize = fs + '%';

    return this
};

document.body.setScaledFont(0.10);
window.onresize = function() {
    document.body.setScaledFont(0.10);
}

猜猜是什么？ <audio>仍会向上移动，并最终在<div>之前覆盖<audio>。不可否认，这意味着 vw，vh 单位的使用不是问题。

以下是上面<audio>的代码的重复：

 <audio id="theSong" class="aSongControl" controls preload="auto">
    <source src="audio/Lafayette_Square.m4a" type="audio/mp4">
    <a href='http://www.apple.com/quicktime/download/' title='Get Quicktime' onclick='window.open(this.href); return false'>
    Install Quicktime to hear this awesome Hymn
    </a><br>
 </audio>
<audio>

具有：

.aSongControl {
    display: block;      /* center ... */

    margin: 0 auto;

    width:  90%;

    font-size: 120%;     /* for non-support text ... */
    color:     #990099;
}

audio {
    background-color: white;
}

在这一点上，我不明白为什么必须将class="aSongControl"放在<audio>标记内才能使<audio>通过{{1}填充窗口的宽度}

如果我尝试：

width: 80%

没有块居中也没有窗口填充，这两者都需要在<section class="aSongControl"> <audio id="theSong" controls preload="auto"> ... </audio> </section>中进行。

我希望我知道答案，因为也许这个答案可以说明为什么.aSongControl控件会神秘地向上移动并覆盖{{1 }}。

同样，在OS浏览器上没有问题，只是iOS浏览器。

这是新年的人们，可怜我！

Answer 1

尝试使用它，希望对您有所帮助。

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>

这将阻止用户缩放

缩放时，<audio>对象从底部向上移动并在顶部重叠内容

1 个答案: