webentwicklung-frage-antwort-db.com.de

fensterbreitenänderung im Webbrowser automatisch erkennen?

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

ich möchte erkennen, wann der Benutzer die Größe seines Webbrowsers ändert, damit ich die Spaltenbreite neu einstellen kann. Gibt es eine Möglichkeit, dies automatisch zu erkennen, oder muss ich setTimeinterval verwenden, um eine Schleife durchzuführen und festzustellen, ob sich dies geändert hat?

23
ajsie

Versuchen Sie das resize event

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

Das JavaScript-Ereignis hat den Namen window.onresize.

Die JQuery-Bindung heißt .resize()

20
Pekka 웃

Dies aufzuschreiben, weil irgendwie keine dieser Antworten die modernen Best-Practices auf diese Weise ergibt:

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

In MDN geben sie einen wirklich guten Javascript-Standalone-Code an:

window.onresize = resize;

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

Wenn Sie nur diese Art von Funktionalität benötigen, würde ich Ihnen empfehlen.

5
jasmo2

Denken Sie daran, dass Sie im IE mindestens die Größe der Ereignisblase und die positionierten Elemente ändern und der Dokumentenkörper kann unabhängige Größenänderungsereignisse auslösen.

Außerdem löst IE einen fortlaufenden Strom von "Größenänderungsereignissen" aus, wenn die Größe des Fensters oder Elements durch Ziehen geändert wird. Die anderen Browser warten, bis der Mouseup ausgelöst wird.

IE ist ein ausreichend großer Player, sodass es nützlich ist, über einen Intermediate-Handler zu verfügen, der die Größe von Ereignissen ändert - selbst wenn Sie nur IE -Clients zu ihm verzweigen.

Der ie-Handler legt ein kurzes Timeout (100-200 ms) fest, bevor der 'echte' Größenänderungshandler aufgerufen wird. Wenn dieselbe Funktion vor dem Timeout erneut aufgerufen wird, handelt es sich entweder um ein Bubblng-Ereignis oder das Fenster wird auf eine neue Größe gezogen. Deaktivieren Sie das Timeout und setzen Sie es erneut. 

3
kennebec

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

Ansonsten der 

window.addEventListener("resize")

Feuert die ganze Zeit, während die Fenstergröße geändert wird. Dadurch wird Ihre CPU-Belastung belastet.

0
Luke Dohner

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);
       }
    });
})();
0
Anshul Sanghi

Ich verwende Media = "nur Bildschirm und (min-width: 750px)" href = "... css-Datei für große Fenster" Media = "nur Bildschirm und (max-width: 751px) ) "href =" ... css-Datei für Handys "

Wenn ich den rechten Fensterrahmen nach links und rechts bewege, um die Fenstergröße zu vergrößern oder zu verkleinern, wechselt mein Webbrowser automatisch vom großen Fenster zum Handy. Ich muss keinen Javascript-Code angeben, um die Fensterbreite zu ermitteln. Dies funktioniert für Chrome, Firefox und Internet Explorer auf Windows- und Macintosh-Computern.

0
Jacob Palme