При масштабировании объект <audio>перемещается снизу вверх и перекрывает верхнюю часть - PullRequest
Новая
       6

При масштабировании объект <audio>перемещается снизу вверх и перекрывает верхнюю часть

0 голосов
/ 01 января 2019

Следующая проблема возникает для моего тега <audio> с браузерами iOS Safari, Firefox и Dolphin, но , а не в любом браузере ОС = элемент управления звуком перемещается с увеличением + и в конечном итоге перекрывает объект над ним.

Статическая компоновка, без масштабирования, это здорово ... при масштабировании все разбрасывается по обрыву.

ЧТО, я связался с мета-тегом "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>.Достаточно просто, но я могу лишь повторить то, что сказал другой член СТО: «Просто не приятно отключать масштабирование, особенно для тех, кто зависит от этой функции».

2) В любом случае, давайте продолжим.Я «регрессировал» к использованию JS и отказался от модулей Viewport, 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 единицы не проблема

1042 * Здесь повторение кода для <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> взаполните ширину окна с помощью width: 80%

Если я попытаюсь: 

<section class="aSongControl">
<audio id="theSong" controls preload="auto">
...
</audio>
</section>

, то нет центрирования блока и заполнения окна, оба из которых требуются в .aSongControl.

Хотелось бы, чтобы я знал ответ, потому что, возможно, этот ответ содержит ключ к пониманию того, почему элемент управления <audio> демонстрирует собственный разум, таинственным образом перемещаясь вверх и покрывая <div> над <audio>.

Опять же, нет проблем в браузерах ОС ... только в браузерах iOS.

Это новогодние люди, пожалейте меня!

1 Ответ

0 голосов
/ 01 января 2019

Попробуйте использовать это, надеюсь, это поможет. 

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

Это предотвратит масштабирование пользователя

...