Отключить зум на div, но позволит увеличить на странице (альтернативная див)

есть ли способ отключить масштабирование div или каких-либо конкретных элементов на веб-сайте? Например, если я хотел, чтобы страница была масштабируемой, но не #Header div, есть ли способ сделать одну масштабируемую, а другую-не масштабируемой?

в основном, когда вы масштабируете мобильное устройство, он также масштабирует заголовок, но я хочу, чтобы заголовок всегда был фиксированным размером (не масштабируемым).

Я знаю, что вы можете использовать этот код, чтобы отключить масштабирование в целом:

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

34
css fixed html zoom

4 ответов

вы не можете сделать это без умных писак.

однако вы можете (и должны) использовать следующий CSS для устранения проблем с масштабированием на мобильных устройствах:

header {
    position: fixed;
    ...
}

@media only screen and (max-width: 720px) {
    header {
        position: absolute;
    }
}

этот код позволяет position: absolute когда ширина дисплея меньше или равна 720px, а заголовок становится частью страницы, а не фиксируется сверху.

7

Я не думаю, что вы можете сделать это прямо. Одним из возможных вариантов было бы обнаружение масштабирования через события js и масштабирование элементов соответственно.

другой вариант - "сломать" клавишу CTRL, чтобы отключить масштабирование на вашем сайте, но это просто большой нет-нет.

0

короче, вы, конечно, можете это сделать.

вы можете ловить события изменения размера окна и изменять размер плавающего div в соответствии с изменением dpi, рассчитанным из различных новых атрибутов окна и внутренней ширины и высоты.

Итак, когда вы увеличить, вы хотите shrink плавающий div, поэтому он сохраняет исходный dpi, и наоборот.

Это будет эпическая скрипка-пересмотрите этот ответ в ближайшее время, так как мне, возможно, придется сделать вещь. Уже замечаю некоторые кросс-браузерные несоответствия с dpi, так что да, весело.

0

Если вы используете angular, есть способ дать один идентификатор вашему заголовку div, а затем написать следующий код в контроллере:

document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');

я использовал в моем проекте, и он работал хорошо..

-2