Tôi có thể phát hiện kích thước cửa sổ bằng jQuery bằng cách nào?

Question

Tôi có thể phát hiện kích thước cửa sổ/trình duyệt bằng jQuery như Gmail như thế nào? Trong Gmail, chúng tôi không cần làm mới hoặc tải lại trang hiện tại ngay sau khi chúng tôi thay đổi độ phân giải cửa sổ trong cài đặt cửa sổ? Trong dự án của tôi, tôi cần phải làm mới trình duyệt ngay sau khi cài đặt cửa sổ đã được thay đổi.

Bất kỳ ý tưởng nào cũng sẽ được đánh giá cao.

Answer 1

Bạn thực sự không thể tìm thấy độ phân giải màn hình từ một trang web. Có là câu lệnh Truy vấn phương tiện CSS cho nó, nhưng nó được triển khai kém trong hầu hết các thiết bị và trình duyệt, nếu có. Tuy nhiên, bạn không cần phải biết độ phân giải của màn hình, bởi vì thay đổi nó gây ra (pixel) chiều rộng của cửa sổ để thay đổi, mà thể được phát hiện bằng cách sử dụng các phương pháp khác đã được mô tả:

$(window).resize(function() { 
    // This will execute whenever the window is resized 
    $(window).height(); // New height 
    $(window).width(); // New width 
}); 

Bạn cũng có thể sử dụng CSS Media Queries trong trình duyệt hỗ trợ chúng chỉnh sửa kiểu trang của bạn với các độ rộng hiển thị khác nhau, nhưng bạn thực sự cần sử dụng đơn vị và tỷ lệ em và min-width và max-width trong CSS của mình nếu bạn muốn bố cục linh hoạt. Gmail có thể sử dụng kết hợp tất cả những thứ này.

Answer 2

//get dimensions 
var height = $(window).height(); 
var width = $(window).width(); 

//refresh on resize 
$(window).resize(function() { 
    location.reload(true) 
}); 

không chắc chắn nếu bạn muốn tinker với kích thước của các phần tử hoặc thực sự làm mới trang. vì vậy ở đây có rất nhiều thứ khác nhau chọn những gì bạn muốn. bạn thậm chí có thể đặt chiều cao và chiều rộng trong sự kiện thay đổi kích thước nếu bạn thực sự muốn.

Answer 3

Bạn có muốn phát hiện khi cửa sổ đã được thay đổi kích thước không?

Bạn có thể sử dụng số resize của JQuery để đính kèm trình xử lý.

Answer 4

Bạn có thể nhận các giá trị cho chiều rộng và chiều cao của trình duyệt bằng cách sử dụng sau đây:

$(window).height(); 
$(window).width(); 

Để nhận được thông báo khi trình duyệt được thay đổi kích cỡ, sử dụng ràng buộc này callback:

$(window).resize(function() { 
    // Do something 
}); 

Answer 5

Bạn cũng có thể sử dụng Javascript đơn giản window.innerWidth để so sánh chiều rộng.

Nhưng sử dụng jQuery .resize() sa thải tự động cho bạn:

$(window).resize(function() { 
    // your code... 
}); 

http://api.jquery.com/resize/

Answer 6

Bạn làm cho một div nơi nào đó trên trang và đặt mã này:

<div id="winSize"></div> 
<script> 
    var WindowsSize=function(){ 
     var h=$(window).height(), 
      w=$(window).width(); 
     $("#winSize").html("<p>Width: "+w+"<br>Height: "+h+"</p>"); 
    }; 
    $(document).ready(WindowsSize); 
    $(window).resize(WindowsSize); 
</script> 

Dưới đây là một đoạn:

var WindowsSize=function(){ 
 
    \t var h=$(window).height(), 
 
    \t \t w=$(window).width(); 
 
    \t $("#winSize").html("<p>Width: "+w+"<br>Height:"+h+"</p>"); 
 
}; 
 
$(document).ready(WindowsSize); 
 
$(window).resize(WindowsSize);

#winSize{ 
 
    position:fixed; 
 
    bottom:1%; 
 
    right:1%; 
 
    border:rgba(0,0,0,0.8) 3px solid; 
 
    background:rgba(0,0,0,0.6); 
 
    padding:5px 10px; 
 
    color:#fff; 
 
    text-shadow:#000 1px 1px 1px,#000 -1px 1px 1px; 
 
    z-index:9999 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="winSize"></div>

Tất nhiên, điều chỉnh cho phù hợp với nhu cầu của bạn! ;)