Ottieni larghezza e altezza del browser dopo che l'utente ridimensiona la finestra

Question

Esiste un modo per ottenere la larghezza e l'altezza del browser dopo che un utente ha ridimensionato la finestra. Ad esempio se la finestra è 1920 per 1080 e l'utente cambia la finestra in 500 per 500 c'è un modo per ottenere quei due nuovi valori in JavaScript o in jQuery?

Answer 1

È possibile ascoltando l'evento resize.

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

Answer 2

Utilizzare il metodo di ridimensionamento jQuery per ascoltare la modifica della dimensione della finestra. all'interno del callback puoi ottenere altezza e larghezza.

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

}); 

Answer 3

È possibile utilizzare l'evento resize, insieme ai height() e width() proprietà

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

See some more examples here

Answer 4

È possibile utilizzare la funzione di JQuery ridimensionare(). Assicurati inoltre di aggiungere la stessa logica di ridimensionamento per ricaricare l'evento. Se l'utente si ricarica nella finestra delle dimensioni, la logica non funzionerà.

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

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

Answer 5

Pure Javascript risposta:

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

Questo funziona bene su Chrome. Tuttavia, funziona solo su Chrome. Un esempio leggermente più cross-browser utilizza le proprietà target dell'evento "outerWidth" e "outerHeight", poiché in questo caso l'evento "target" è la finestra stessa. Il codice sarebbe come questo

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); 

Questo funziona bene in Firefox e Chrome

Speranza che aiuta :)

Edit: Testato in IE9 e questo ha funzionato troppo :)

Answer 6

In pratica, Io uso questo e mi aiuta molto:

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); 
    } 

Answer 7

Se è necessario conoscere questi valori per fare layou t aggiustamenti, scommetto che pianifichi di ascoltare quei valori. Ho consigliato di utilizzare l'API Window.matchmedia() a tale scopo.

È much more performant ed è fondamentalmente l'equivalente JS delle query multimediali CSS.

Molto rapido esempio di utilizzo:

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 */ 
} 

È anche possibile impostare un listener che otterrà chiamato ogni volta che lo stato dei matches modifiche alle proprietà.

Vedere MDN per description e example of using a listener.