Nhận chiều rộng và chiều cao của trình duyệt sau khi người dùng đổi kích thước cửa sổ

Question

Có cách nào để có chiều rộng và chiều cao của trình duyệt sau khi người dùng đã đổi kích thước cửa sổ hay không. Ví dụ, nếu cửa sổ là 1920 bởi 1080 và người dùng thay đổi cửa sổ 500 500 có cách nào để có được hai giá trị mới trong JavaScript hoặc jquery?

Answer 1

Có thể bằng cách nghe sự kiện resize.

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

Answer 2

Sử dụng phương pháp thay đổi kích thước của jQuery để nghe thay đổi kích thước cửa sổ. bên trong gọi lại bạn có thể nhận được chiều cao và chiều rộng.

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

}); 

Answer 3

Bạn có thể sử dụng các sự kiện resize, cùng với height() và width() tính

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

See some more examples here

Answer 4

Bạn có thể sử dụng JQuery thay đổi kích thước) chức năng (. Ngoài ra, hãy đảm bảo bạn thêm cùng một logic thay đổi kích thước để tải lại sự kiện. Nếu người dùng tải lại trong cửa sổ có kích thước, logic của bạn sẽ không hoạt động.

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

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

Answer 5

tinh khiết Javascript câu trả lời:

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

này hoạt động tốt trên chrome. Tuy nhiên, nó chỉ hoạt động trên chrome. Một ví dụ trên nhiều trình duyệt hơn là sử dụng các thuộc tính đích của sự kiện "outerWidth" và "outerHeight", vì trong trường hợp này, sự kiện "target" là chính cửa sổ. Mã này sẽ là như thế này

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

này hoạt động tốt trong firefox và chrome

Hy vọng nó sẽ giúp :)

Edit: Tested trong ie9 và điều này đã làm việc quá :)

Answer 6

Thực tế, Tôi sử dụng điều này và nó giúp tôi rất nhiều:

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

Nếu bạn cần biết những giá trị này để làm layou t điều chỉnh, tôi đặt cược bạn có kế hoạch lắng nghe những giá trị đó. Tôi khuyên bạn nên sử dụng API Window.matchmedia() cho mục đích đó thay thế.

Đây là much more performant và về cơ bản là tương đương với các truy vấn phương tiện CSS.

dụ Rất nhanh chóng sử dụng:

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

Bạn cũng có thể thiết lập một người biết lắng nghe mà sẽ được gọi mỗi khi trạng thái của matches thay đổi tài sản.

Xem MDN cho description và example of using a listener.