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?
Holen Sie sich die Breite und Höhe des Browsers, nachdem der Benutzer die Größe des Fensters geändert hat
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 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();
});
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();
});