Desactivar zoom en un div, pero permitir zoom en la página (un div alternativo)

¿Hay alguna manera de desactivar el zoom en un div, o cualquier elemento en particular en un sitio web? Por ejemplo, si quisiera que la página fuera ampliable, pero no el div #Header, ¿hay alguna manera de hacer que una sea ampliable y la otra no ampliable?

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

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

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

Author: GJDesigns, 2012-12-15
Source

4 answers

No se puede hacer eso sin hacks inteligentes.

Sin embargo, puede (y debe) usar el siguiente CSS para solucionar problemas de zoom en dispositivos móviles:

header {
    position: fixed;
    ...
}

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

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

 7
Author: Aleksej Komarov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-14 16:48:17

No creo que puedas hacer eso directamente. Una posible opción 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 desactivar el zoom en su sitio web, pero eso es solo un gran no-no.

 0
Author: mkey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-14 21:58:53

En corto, ciertamente puedes hacer eso.

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

Por lo tanto, cuando hace zoom en, desea reducir el div flotante para que conserve el dpi original, y viceversa.

Esto sería un violín épico - vuelva a visitar esta respuesta pronto, ya que puede que tenga que hacer tal cosa. Ya notando algunos inconsistencias entre navegadores con dpi, así que sí, divertido.

 0
Author: Dominic Cerisano,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-02 19:15:44

Si está utilizando angular, hay una manera de dar un id a su div de 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..

 -2
Author: pratik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-25 09:34:17