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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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