deaktivieren Sie den CTRL/Wheel Zoom-Effekt zur Laufzeit

Question

Wie deaktivieren Sie den Ctrl/Rad Zoom-Effekt mit CSS oder Javascript auf bestimmte Elemente. Ich erstelle eine Menüleiste, die verzerrt wird, wenn der Zoom-Effekt angewendet wird. Ich möchte es nur für bestimmte Elemente deaktivieren.

Answer 1

Sie können nicht; Dies ist eine Browserfunktion, keine Dokumentfunktion.

Nachdem Sie das gesagt haben, wenn Sie CSS style = "font-size: 9px;" verwenden, können Sie die Textgröße überschreiben. Der Browserzoom funktioniert weiterhin, und Änderungen der Browserschriftgröße haben einige Neuformatierungseffekte.

Answer 2

Bessere Idee: Gestalten Sie Ihr Layout so, dass es robust genug ist, um solche Änderungen zu bewältigen. Sie können sie nicht deaktivieren, selbst wenn Sie die Schriftgröße korrigieren (was Sie eigentlich nie tun sollten), damit Sie genauso gut auf das Zoomen reagieren können.

Fakt ist, wenn alle Elemente gleichmäßig vom Browser skaliert werden, sollte Ihre Seite genauso aussehen und funktionieren wie zuvor (außer, Sie wissen schon, größer), es sei denn, Sie haben in Ihrem Design einige faule Verknüpfungen verwendet irgendwo.

Answer 3

Hier ist mein Problem: Ich habe immer mit ems entworfen, und sie arbeiten magisch. Aber mit dem ganzseitigen Zoom werden meine Hintergründe auch vergrößert. Wenn ich ein sich wiederholendes Muster als Haupthintergrund habe, möchte ich nicht, dass es pixelisiert wird. Sie helfen uns, einige Arbeiten zu vermeiden, wie die Implementierung von Doug Bowmans Sliding Doors von CSS, aber jetzt muss ich mit verschwommenen Tabs leben.

Ich habe auch ein anderes Problem mit Ganzseiten-Zoom, zumindest wie es in den heutigen Browsern implementiert ist: Ich bin einer der "Leute", die meinen Browser auf 12pt Schriftart statt 16pt gesetzt. Hin und wieder stolperte ich über eine Website mit fester Breite, die den Text auf eine winzige Größe skaliert (ich nehme an, dass sie 0.9em oder etwas anstelle von 14px verwendet haben, während sie versuchten, es zu erstellen) kleiner). Normalerweise würde ich nur ein oder zwei Kerben heranziehen, und alles wäre gut. Bei einem ganzseitigen Zoom sind die Bilder jedoch stark skaliert und ich habe eine horizontale Bildlaufleiste.

Die Lösung für das erste Problem wäre, eine Art Verarbeitungsanweisung im Hintergrundbild-Tag zu erlauben, um ein ganzseitiges Zoomen auf diesem Element zu verhindern. Oder vielleicht etwas im Kopf des Dokuments. Wenn Browser wirklich fair sein wollen, könnten sie den Benutzern auch eine Option geben, die sie einstellen könnten, die die No-Zoom-Anweisung übersteuert, so dass sie trotzdem zoomen können, wenn sie dies wünschen. Die Lösung für das zweite Problem wäre für den Ganzseitenzoom, um alle px in em mit einer Rate von 16px/em zuerst zu konvertieren und dann Zoom auf Ihre Textgröße, anstatt px zu em mit Ihrem Text zu konvertieren Größe als Basis. Wenn Sie dann bis zu 16px zurückscrollen, werden die Bilder wie gewünscht perfekt groß.

Answer 4

Lösung für IE und 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; 
    } 
}