tag - viewport css responsive

desactivar el efecto CTRL/Zoom de rueda en el tiempo de ejecución

Question

¿Cómo se desactiva el efecto de desplazamiento ctrl / rueda con css o javascript en ciertos elementos? Creo una barra de menú que se distorsiona cuando se aplica el efecto de zoom. Me gustaría desactivarlo solo para ciertos elementos.

Answer 1

Mejor idea: diseña tu diseño para que sea lo suficientemente robusto como para manejar cambios como este. No puede desactivarlos, incluso si arregla el tamaño de la fuente (lo que nunca debe hacer en primer lugar), por lo que también podría responder al acercamiento con gracia.

El hecho es que si todos los elementos son escalados por igual por el navegador, tu página debería verse y funcionar exactamente de la misma manera que antes (excepto, ya sabes, más grande) a menos que tomes atajos perezosos en algún lugar del diseño.

Answer 2

No puedes; esta es una característica del navegador, no una función de documento.

Habiendo dicho eso, si usa el estilo de CSS = "font-size: 9px;", puede anular el tamaño del texto. El zoom del navegador seguirá funcionando, y los cambios en el tamaño de la fuente del navegador tendrán algunos efectos de reformateo.

Answer 3

Aquí está mi problema: siempre he diseñado con ems, y funcionan mágicamente. Pero con el zoom de página completa, mis fondos también se acercan. Si tengo un patrón repetitivo como fondo principal, no quiero que se pixelice. Nos ayudan a evitar algunos trabajos, como la implementación de las puertas correderas de CSS de Doug Bowman, pero ahora tengo que vivir con pestañas borrosas.

También tengo otro problema con el zoom de página completa, al menos tal como se implementa en los navegadores actuales: soy una de "esas" personas que configuran mi navegador con una fuente de 12 puntos en lugar de 16 puntos. De vez en cuando, me encontraba con un sitio (de ancho fijo, por supuesto) que cambiaba el tamaño del texto a un tamaño pequeño (supongo que usaron 0.9em o algo así, en lugar de 14px, mientras intentaban hacerlo menor). Usualmente solo acercaba una o dos mitades, y todo estaría bien. Sin embargo, con el zoom de página completa, las imágenes se escalan mal y tengo una barra de desplazamiento horizontal.

La solución al primer problema sería permitir algún tipo de instrucción de procesamiento en la etiqueta background-image para no permitir el zoom de página completa en ese elemento. O tal vez algo en la cabeza del documento. Si los navegadores realmente quieren ser justos al respecto, también podrían darles a los usuarios una opción que podrían establecer que anula la instrucción sin zoom, para que puedan hacer zoom de todos modos si así lo desean. La solución al segundo problema sería el zoom de página completa para convertir todas las px en em a una velocidad de 16px / em primero, y luego reducir el tamaño del texto, en lugar de convertir px a em usando el tamaño de texto como una base. Luego, al desplazar hacia atrás hasta 16 píxeles, las imágenes quedarán perfectamente dimensionadas, según lo previsto.

Answer 4

solución para IE y Firefox:

var obj=document.body;  // obj=element for example body
// bind mousewheel event on the mouseWheel function
if(obj.addEventListener)
{
    obj.addEventListener(''DOMMouseScroll'',mouseWheel,false);
    obj.addEventListener("mousewheel",mouseWheel,false);
}
else obj.onmousewheel=mouseWheel;

function mouseWheel(e)
{
    // disabling
    e=e?e:window.event;
    if(e.ctrlKey)
    {
        if(e.preventDefault) e.preventDefault();
        else e.returnValue=false;
        return false;
    }
}