Änderungen der Fensterbreite des Webbrowsers automatisch erkennen?

Lesezeit: 3 Minuten

Benutzer-Avatar
ajsie

Ich weiß, dass Sie mit $(window).width() die Größe des Webbrowsers erhalten können.

Ich möchte erkennen, wenn der Benutzer die Größe seines Webbrowsers ändert, damit ich die Spaltenbreite neu anpassen kann. Gibt es eine Möglichkeit, dies automatisch zu erkennen, oder muss ich setTimeinterval verwenden, um eine Schleife zu erstellen und zu sehen, ob es sich geändert hat?

  • Denken Sie daran, dass Sie suchen, wenn Sie Ihr Design (= CSS) ändern möchten, wenn sich die Bildschirmgröße ändert Medien-Anfragen. Dafür braucht man kein JS. Zum Beispiel: @media max-width: 700px { body { yourCSS } } formatiert das body-Element nur, wenn der Bildschirm weniger als 700 Pixel breit ist.

    – Fla

    27. August 2019 um 15:38 Uhr


Versuchen Sie die Größe des Ereignisses ändern

$(window).resize(function() {
  console.log('window was resized');
});

  • Dies wird auch durch den Zoom von mobilen Browsern ausgelöst, es sollte ein Wenn vorhanden sein, um die Größen manuell mit einem vorherigen Wert zu vergleichen.

    – Hoffmann

    30. August 2013 um 13:54 Uhr

  • Aber das ist nicht ganz das, was gefragt wurde (oder wonach ich suche). Wenn Sie beispielsweise eine Datei in Chrome herunterladen, erscheint die „Downloads“-Leiste unten auf der Seite, ändert die Höhe Ihres Browsers und löst das Größenänderungsereignis korrekt aus. Das ist keine Breitenänderung, also erhalten Sie ein Ereignis, das Sie herausfiltern müssen (was ich suche …)

    – philw

    12. Oktober 2016 um 15:17 Uhr

Schreiben Sie dies auf, denn irgendwie gibt keine dieser Antworten die modernen Best Practices, um dies zu tun:

window.addEventListener("resize", function(event) {
    console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})

Das JavaScript-Ereignis heißt window.onresize.

Die JQuery-Bindung wird benannt .resize()

Im MDN Sie geben einen wirklich guten Javascript-Standalone-Code:

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

Wenn Sie genau diese Art von Funktionalität benötigen, würde ich empfehlen, sich dafür zu entscheiden.

Benutzer-Avatar
Lukas Döhner

Vielleicht möchten Sie verwenden debounce :
https://davidwalsh.name/javascript-debounce-function

Ansonsten der

window.addEventListener("resize")

Wird die ganze Zeit ausgelöst, während die Fenstergröße geändert wird. Was Ihren CPU-Overhead belasten wird.

Benutzer-Avatar
kennebec

Etwas, das Sie im Hinterkopf behalten sollten – zumindest im IE können die Sprechblase für Ereignisse zur Größenänderung und positionierte Elemente und der Dokumentkörper unabhängige Ereignisse zur Größenänderung auslösen.

Außerdem löst IE einen kontinuierlichen Strom von ‘resize’-Ereignissen aus, wenn die Größe des Fensters oder Elements durch Ziehen geändert wird. Die anderen Browser warten auf das Auslösen von mouseup.

IE ist ein Player, der groß genug ist, dass es nützlich ist, einen Zwischenhandler zu haben, der Ereignisse zur Größenänderung auffängt – selbst wenn Sie nur IE-Clients darauf verzweigen.

Der ie-Handler setzt ein kurzes Timeout (100-200 ms), bevor er den ‘echten’ Größenänderungs-Handler aufruft. Wenn die gleiche Funktion vor dem Timeout erneut aufgerufen wird, handelt es sich entweder um ein sprudelndes Ereignis oder das Fenster wird auf eine neue Größe gezogen, also löschen Sie das Timeout und setzen Sie es erneut.

Benutzer-Avatar
Anshul Sanghi

Hier ist ein kleines Stück Code, das ich für dasselbe zusammengestellt habe.

(function () {
    var width = window.innerWidth;

    window.addEventListener('resize', function () {
       if (window.innerWidth !== width) {
           window.location.reload(true);
       }
    });
})();

1205520cookie-checkÄnderungen der Fensterbreite des Webbrowsers automatisch erkennen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy