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

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

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

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

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

Ответ 1

Вкратце: вы не можете этого сделать без умных хаков.

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

header {
    position: fixed;
    ...
}

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

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

Ответ 2

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

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

Ответ 3

Короче, вы, безусловно, можете это сделать.

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

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

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

Ответ 4

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

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

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