Есть ли способ отключить масштабирование div или каких-либо конкретных элементов на веб-сайте? Например, если бы я хотел, чтобы страница была масштабируемой, но не div #Header, есть ли способ сделать ее масштабируемой, а другую не масштабируемой?
В основном, когда вы увеличиваете масштаб мобильного устройства, оно также увеличивает масштаб заголовка, но я хочу, чтобы заголовок был фиксированным размером во все времена (не масштабируемым).
Я знаю, что вы можете использовать этот код, чтобы отключить масштабирование в целом:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
Вкратце: вы не можете этого сделать без умных хаков.
Однако вы можете (и должны) использовать следующий CSS для устранения проблем с масштабированием на мобильных устройствах:
header {
position: fixed;
...
}
@media only screen and (max-width: 720px) {
header { position: absolute; }
}
Этот код включает position: absolute, когда ширина экрана меньше или равна 720px, а заголовок становится частью страницы, а не фиксируется сверху.
Я не думаю, что вы можете сделать это напрямую. Одним из возможных вариантов было бы обнаружение масштабирования через события js и элементы шкалы соответственно.
Другой вариант - "разбить" клавишу CTRL, чтобы отключить масштабирование на вашем веб-сайте, но это просто большой нет-нет.
Короче, вы, безусловно, можете это сделать.
Вы можете перетащить события изменения размера окна и изменить размер вашего плавающего div в соответствии с изменением dpi, вычисленным из различных атрибутов нового окна и внутренней ширины и высоты.
Итак, когда вы увеличиваете масштаб, вы хотите сжать плавающий div, чтобы он сохранял исходный dpi, и наоборот.
Это была бы эпическая скрипка - скоро повторите этот ответ, так как мне, возможно, придется это сделать. Уже заметили некоторые несоответствия кросс-браузера с разрешением dpi, так что да, весело.
Если вы используете angular, вы можете указать один id для своего заголовка div и затем записать следующий код в контроллере:
document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
Я использовал в своем проекте и работал хорошо.