Holen Sie sich die Breite und Höhe des Browsers, nachdem der Benutzer die Größe des Fensters geändert hat

Lesezeit: 3 Minuten

Gibt es eine Möglichkeit, die Breite und Höhe des Browsers abzurufen, nachdem ein Benutzer die Größe des Fensters geändert hat? Wenn das Fenster beispielsweise 1920 x 1080 groß ist und der Benutzer das Fenster auf 500 x 500 ändert, gibt es eine Möglichkeit, diese beiden neuen Werte in JavaScript oder Jquery zu erhalten?

Benutzeravatar von Pablo Mescher
Pablo Mescher

Reine Javascript-Antwort:

var onresize = function() {
   //your code here
   //this is just an example
   width = document.body.clientWidth;
   height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);

Bei Chrom funktioniert das problemlos. Allerdings funktioniert es nur auf Chrom. Ein etwas browserübergreifenderes Beispiel ist die Verwendung der Ereigniszieleigenschaften „outerWidth“ und „outerHeight“, da in diesem Fall das Ereignis „target“ das Fenster selbst ist. Der Code wäre so

var onresize = function(e) {
   //note i need to pass the event as an argument to the function
   width = e.target.outerWidth;
   height = e.target.outerHeight;
}
window.addEventListener("resize", onresize);

Dies funktioniert in Firefox und Chrome problemlos

Ich hoffe es hilft 🙂

Bearbeiten: Getestet in ie9 und das hat auch funktioniert 🙂

  • Bearbeiten: document.width und document.height sollten nicht mehr verwendet werden und haben bei mir in Chrome nicht funktioniert. Stattdessen wird empfohlen, document.body.clientWidth und document.body.clientHeight zu verwenden. Sehen howtocreate.co.uk/tutorials/javascript/browserwindow

    – Daniel Wallmann

    9. März 2017 um 19:55 Uhr


Wenn Sie diese Werte kennen müssen, um Layoutanpassungen vorzunehmen, wetten Sie, dass Sie sich diese Werte anhören werden. Ich empfahl die Verwendung von Window.matchmedia() API für diesen Zweck stattdessen.

es ist viel performanter und ist im Grunde das JS-Äquivalent von CSS-Medienabfragen.

Sehr schnelles Anwendungsbeispiel:

if (window.matchMedia("(max-width: 500px)").matches) {
  /* the viewport is less than or exactly 500 pixels wide */
} else {
  /* the viewport is more than 500 pixels wide */
}

Sie können auch einen Listener einrichten, der jedes Mal aufgerufen wird, wenn der Status der matches Eigentumsänderungen.

Siehe MDN für Bezeichnung und Beispiel für die Verwendung eines Listeners.

  • Dies funktioniert nicht wie CSS-Medien, da es nicht zuhört…. Fügen Sie eine console.log in diese Funktion ein und Sie werden sehen, dass es nicht ausgelöst wird, wenn sich die Größe des Fensters ändert. Es funktioniert nur beim Laden der Seite.

    – luke_mclachlan

    18. Mai 2021 um 10:10 Uhr

  • @luke_mclachlan Anscheinend hast du nicht die ganze Antwort gelesen 😉

    – Honza Kalfus

    18. Mai 2021 um 14:18 Uhr

Durch Zuhören ist es möglich resize Veranstaltung.

$(window).resize(function() {
  var width = $(window).width();
  var height = $(window).height();
})

Sie können die JQuery-Funktion resize() verwenden. Stellen Sie außerdem sicher, dass Sie dieselbe Größenänderungslogik zum Neuladen des Ereignisses hinzufügen. Wenn der Benutzer im Fenster mit der Größe neu lädt, funktioniert Ihre Logik nicht.

 $(window).resize(function() {
                        $windowWidth = $(window).width();
                            $windowHeight = $(window).height();
                        });

 $(document).ready(function() {
      //same logic that you use in the resize...
  });

Praktisch verwende ich das und es hilft mir sehr:

    var TO = false;
    var resizeEvent="onorientationchange" in window ? 'orientationchange' : 'resize';
    $(window).bind(resizeEvent, function() {
        TO && clearTimeout(TO);
        TO = setTimeout(resizeBody, 200);
    });
    function resizeBody(){
        var height = window.innerHeight || $(window).height();
        var width = window.innerWidth || $(window).width();
        alert(height);
        alert(width);
    }

Was hast du probiert, Benutzeravatar
Was hast du versucht

Du kannst den … benutzen resize Veranstaltung, zusammen mit der height() und width() Eigenschaften

$(window).resize(function(){
   var height = $(window).height();
   var width = $(window).width();
});

Weitere Beispiele finden Sie hier

Verwenden Sie die jQuery-Resize-Methode, um die Änderung der Fenstergröße abzuhören. Innerhalb des Rückrufs können Sie Höhe und Breite erhalten.

$(window).resize(function(){
    var width = $(window).width();
    var height = $(window).height();

});

1403780cookie-checkHolen Sie sich die Breite und Höhe des Browsers, nachdem der Benutzer die Größe des Fensters geändert hat

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

Privacy policy