Ist es möglich, mithilfe von JavaScript zu erkennen, wann der Benutzer den Zoom einer Seite ändert? Ich möchte einfach ein "Zoom" -Ereignis abfangen und darauf reagieren (ähnlich wie bei window.onresize).
Vielen Dank.
javascript
events
zoom
user123093
quelle
quelle
Antworten:
Es gibt keine Möglichkeit, aktiv zu erkennen, ob ein Zoom vorhanden ist. Ich habe hier einen guten Eintrag gefunden, wie Sie versuchen können, ihn zu implementieren.
Sie können dies auch mit den Tools des obigen Beitrags tun. Das Problem ist, dass Sie mehr oder weniger fundierte Vermutungen anstellen, ob die Seite gezoomt wurde oder nicht. Dies funktioniert in einigen Browsern besser als in anderen.
Es gibt keine Möglichkeit festzustellen, ob die Seite gezoomt ist, wenn sie Ihre Seite beim Zoomen lädt.
quelle
document.body.offsetWidth
Ich verwende dieses JavaScript, um auf Zoom- "Ereignisse" zu reagieren.
Es fragt die Fensterbreite ab. (Wie auf dieser Seite etwas vorgeschlagen (auf die Ian Elliott verlinkt hat): http://novemberborn.net/javascript/page-zoom-ff3 [Archiv] )
Getestet mit Chrome, Firefox 3.6 und Opera, nicht mit IE.
Grüße, Magnus
quelle
Gute Nachrichten
jedereinige Leute! Neuere Browser lösen ein Ereignis zum Ändern der Fenstergröße aus, wenn der Zoom geändert wird.quelle
Definieren wir px_ratio wie folgt:
px-Verhältnis = Verhältnis von physischem Pixel zu CSS-px.
Wenn eine Seite gezoomt wird, werden die Pixel des Ansichtsfensters (px unterscheidet sich von Pixel) verringert und sollten an den Bildschirm angepasst werden, damit das Verhältnis (physisches Pixel / CSS_px) größer wird.
Beim Ändern der Fenstergröße wird jedoch die Bildschirmgröße ebenso reduziert wie die Pixel. so bleibt das Verhältnis erhalten.
Zoomen: Windows.resize-Ereignis auslösen -> und px_ratio ändern
aber
Größenänderung: Windows.resize-Ereignis auslösen -> ändert px_ratio nicht
Der entscheidende Punkt ist der Unterschied zwischen CSS PX und Physical Pixel.
https://gist.github.com/abilogos/66aba96bb0fb27ab3ed4a13245817d1e
quelle
Das funktioniert bei mir:
Es wird nur auf IE8 benötigt. Alle anderen Browser generieren natürlich ein Größenänderungsereignis.
quelle
Es gibt ein geschicktes Plugin
yonran
, das die Erkennung übernimmt . Hier ist seine zuvor beantwortete Frage zu StackOverflow. Es funktioniert für die meisten Browser. Die Anwendung ist so einfach:Demo
quelle
Always enable zoom
Schaltfläche in der Option Eingabehilfen. Die Demo reagiert nicht auf die Änderung.Ich möchte eine Verbesserung der vorherigen Lösung vorschlagen, indem Änderungen an der Fensterbreite nachverfolgt werden. Anstatt Ihr eigenes Array von Ereignis-Listenern beizubehalten, können Sie das vorhandene Javascript-Ereignissystem verwenden und bei einer Änderung der Breite Ihr eigenes Ereignis auslösen und Ereignishandler daran binden.
Gas / Entprellen kann dabei helfen, die Anrufrate Ihres Handlers zu reduzieren.
quelle
Sie können auch die Größenänderung des Texts und den Zoomfaktor abrufen, indem Sie ein Div einfügen, das mindestens einen nicht unterbrechbaren Bereich (möglicherweise ausgeblendet) enthält, und dessen Höhe regelmäßig überprüfen. Wenn sich die Höhe ändert, hat sich die Textgröße geändert (und Sie wissen, wie viel - dies wird übrigens auch ausgelöst, wenn das Fenster im Ganzseitenmodus gezoomt wird und Sie immer noch den richtigen Zoomfaktor bei gleicher Höhe / erhalten Höhenverhältnis).
quelle
quelle
Unter iOS 10 ist es möglich, dem
touchmove
Ereignis einen Ereignis-Listener hinzuzufügen und festzustellen, ob die Seite mit dem aktuellen Ereignis gezoomt wurde.quelle
Obwohl dies eine 9 Jahre alte Frage ist, bleibt das Problem bestehen!
Ich habe die Größenänderung erkannt, während ich das Zoomen in einem Projekt ausgeschlossen habe. Daher habe ich meinen Code so bearbeitet, dass sowohl die Größenänderung als auch das Zoomen exklusiv voneinander erkannt werden. Es funktioniert die meiste Zeit, also wenn die meisten für Ihr Projekt gut genug ist, sollte dies hilfreich sein! Es erkennt 100% der Zeit das Zoomen in dem, was ich bisher getestet habe. Das einzige Problem ist, dass wenn der Benutzer verrückt wird (dh das Fenster spastisch in der Größe ändert) oder das Fenster verzögert wird, es möglicherweise als Zoom anstelle einer Fenstergröße ausgelöst wird.
Es erkennt eine Änderung der Größe
window.outerWidth
oderwindow.outerHeight
als Fenstergröße, während eine Änderung der Fenstergrößewindow.innerWidth
oderwindow.innerHeight
unabhängig von der Fenstergröße als Zoom erkannt wird.Hinweis: Meine Lösung ist wie die von KajMagnus, aber das hat bei mir besser funktioniert.
quelle
0.05
ohne zumindest eine gute Erklärung zu liefern. ;-) Ich weiß zum Beispiel, dass 10% in Chrome der kleinste Betrag ist, den der Browser auf jeden Fall zoomt, aber es ist nicht klar, dass dies für andere Browser gilt. Stellen Sie immer sicher, dass Ihr Code getestet wird, und seien Sie bereit, ihn zu verteidigen oder zu verbessern.Hier ist eine saubere Lösung:
quelle
Das Größenänderungsereignis funktioniert in modernen Browsern, indem das Ereignis angehängt
window
und dann die Werte desbody
oder eines anderen Elements mit beispielsweise ( angehängt .getBoundingClientRect () ) gelesen werden .Eine andere Alternative : die ResizeObserver-API
Abhängig von Ihrem Layout können Sie darauf achten, die Größe eines bestimmten Elements zu ändern.
Dies funktioniert gut bei «reaktionsschnellen» Layouts, da die Größe der Containerbox beim Zoomen geändert wird.
Achten Sie darauf , Javascript-Aufgaben nicht durch Benutzergestenereignisse zu überladen. Verwenden Sie requestAnimationFrame, wenn Sie Neuzeichnungen benötigen.
quelle
Laut MDN ist "matchMedia" der richtige Weg, dies zu tun. Https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes
Es ist ein bisschen pingelig, weil jede Instanz jeweils nur einen MQ sehen kann. Wenn Sie also daran interessiert sind einer Änderung der , müssen Sie eine Reihe von Übereinstimmungen vornehmen. Da der Browser jedoch für die Ausgabe der Ereignisse verantwortlich ist, ist dies wahrscheinlich Noch leistungsfähiger als das Abrufen, und Sie können den Rückruf drosseln oder entprellen oder an einen Animationsrahmen oder etwas anderes anheften - hier ist eine Implementierung, die ziemlich bissig erscheint. Sie können jederzeit _throttle oder was auch immer eintauschen, wenn Sie bereits davon abhängig sind.
Führen Sie das Code-Snippet aus und zoomen Sie in Ihrem Browser hinein und heraus. Beachten Sie den aktualisierten Wert im Markup - ich habe dies nur in Firefox getestet! Ich weiß, ob Sie Probleme sehen.
quelle
Ich antworte auf einen 3 Jahre alten Link, aber ich denke, hier ist eine akzeptablere Antwort.
Erstellen Sie eine CSS-Datei als,
Z.B:-
Mit dem obigen Code wird die Schriftgröße auf 10 Pixel festgelegt, wenn der Bildschirm auf ca. 125% gezoomt wird. Sie können nach unterschiedlichen Zoomstufen suchen, indem Sie den Wert von '1000px' ändern.
quelle
max-width
und dem Zoomverhältnis?