Uzyskaj szerokość i wysokość przeglądarki po zmianie rozmiaru okna użytkownika

Question

Czy istnieje sposób na uzyskanie szerokości i wysokości przeglądarki po zmianie rozmiaru okna przez użytkownika. Na przykład, jeśli okno wynosi 1920 na 1080 i użytkownik zmienia okno na 500 na 500, czy istnieje jakiś sposób na uzyskanie tych dwóch nowych wartości w JavaScript lub jquery?

Answer 1

Jest to możliwe dzięki odsłuchaniu wydarzenia resize.

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

Answer 2

Użyj metody zmiany rozmiaru jQuery, aby posłuchać zmiany rozmiaru okna. wewnątrz callbacka możesz uzyskać wysokość i szerokość.

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

}); 

Answer 3

Można użyć zdarzenia resize wraz z height() i width() właściwości

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

See some more examples here

Answer 4

można użyć JQuery rozmiaru funkcji(). Upewnij się, że dodajesz tę samą logikę zmiany rozmiaru, aby ponownie załadować zdarzenie. Jeśli użytkownik załaduje się ponownie w oknie o rozmiarach, twoja logika nie zadziała.

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

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

Answer 5

Czysta JavaScript odpowiedź:

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

Działa to dobrze na chrom. Jednak działa tylko na chrome. Nieco więcej przykładów w różnych przeglądarkach używa właściwości celu zdarzenia "outerWidth" i "outerHeight", ponieważ w tym przypadku zdarzeniem "target" jest samo okno. Kod będzie jak tego

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

to działa prawidłowo w Firefox i Chrome

Nadzieja to pomaga :)

Edit: Testowany w IE9 i to działało zbyt :)

Answer 6

Praktycznie Używam tego i bardzo mi to pomaga:

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

Jeśli potrzebujesz poznać te wartości, aby zrobić layou t korekty, założę się, że planujesz słuchać tych wartości. Zamiast tego zaleciłem użycie interfejsu API Window.matchmedia().

Jest to much more performant i jest w zasadzie odpowiednikiem JS zapytań o media CSS.

Bardzo szybkie przykład użycia:

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

Można również skonfigurować słuchacz że dostanę wywoływana za każdym razem, gdy stan matches zmian własności.

Zobacz MDN dla description i example of using a listener.