css - personalized - Deshabilitar el zoom en un div, pero permitir el zoom en la página(un div alternativo)

gif cursor css

Question

¿Hay alguna manera de deshabilitar el zoom en un div o algún elemento en particular en un sitio web? Por ejemplo, si quería que la página fuera ampliable, pero no el div #Header, ¿hay alguna manera de hacer que un zoomable, y el otro no zoomable?

Básicamente, cuando haces zoom en un dispositivo móvil, también amplía el Encabezado, pero quiero que el encabezado tenga un tamaño fijo en todo momento (no se puede ampliar).

Sé que puedes usar este código para deshabilitar el zoom en general:

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

Answer 1

En más corto, ciertamente puedes hacer eso.

Puede atrapar los eventos de cambio de tamaño de la ventana y cambiar el tamaño de su div flotante de acuerdo con el cambio de ppp calculado a partir de los diversos atributos de ancho y alto internos de la nueva ventana.

Por lo tanto, cuando amplía , desea reducir el div flotante para que conserve los ppp originales y viceversa.

Este sería un violín épico: revisa esta respuesta pronto, ya que quizás tenga que hacer tal cosa. Ya he notado algunas inconsistencias entre navegadores con dpi, así que sí, es divertido.

Answer 2

No creo que puedas hacer eso directamente. Una opción posible sería detectar el zoom a través de eventos js y escalar los elementos en consecuencia.

Otra opción sería "romper" la tecla CTRL para deshabilitar el zoom en su sitio web, pero eso es solo un gran no-no.

Answer 3

No puedes hacer eso sin hacks inteligentes.

Sin embargo, puede (y debe) utilizar el siguiente CSS para corregir problemas de acercamiento en dispositivos móviles:

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

Este código permite la position: absolute cuando el ancho de la pantalla es menor o igual a 720px, y el encabezado se convierte en la parte de la página, en lugar de estar fijo en la parte superior.

Answer 4

Si está utilizando angular hay una manera de dar una identificación a su div del encabezado y luego escribir el siguiente código en el controlador:

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

Utilicé en mi proyecto y funcionó bien ...