Phát hiện thay đổi kích thước cửa sổ và thực hiện chức năng với jquery

Question

Tôi làm cách nào để mỗi lần người dùng thay đổi kích thước cửa sổ, trang thực hiện một chức năng?

Answer 1

Chức năng sau đây nên làm những gì bạn cần, nó hoạt động trên tất cả các trình duyệt (với ngoại lệ duy nhất của không bắn khi Safari KHÔNG tối đa và độ phân giải thay đổi)

Nó bắn vào cửa sổ lại kích thước như cũng như thay đổi độ phân giải và cũng có sự chậm trễ để tránh nhiều cuộc gọi trong khi người dùng đang định cỡ lại cửa sổ.

var resizeTimer; 

    //Event to handle resizing 
    $(window).resize(function() 
    { 
     clearTimeout(resizeTimer); 
     resizeTimer = setTimeout(Resized, 100); 
    }); 

    //Actual Resizing Event 
    function Resized() 
    { 
     //Your function goes here 
    }; 

Testing jsFiddle

Answer 2

bạn có thể đăng ký một sự kiện onresize trên cửa sổ: một hàm được gọi khi kích thước cửa sổ thay đổi

https://developer.mozilla.org/en/DOM/window.onresize

Answer 3

Sử dụng screen.width và screen.height để xác định chiều rộng và chiều cao của màn hình.

Answer 4

Liên quan đến bài viết này: https://developer.mozilla.org/en-US/docs/DOM/window.onresize

window.onresize = resize; 

function resize() 
{ 
    alert('window size changed'); 
} 

window.resize làm cho nó khá đơn giản.

Answer 5

Đề xuất của tôi. HTML đầu tiên & CSS.

HTML

<div id="wrapper"> 
    <div id="div1"> 
     #div1 content 
    </div> 
    <div id="div2"> 
     #div2 content 
    </div> 
</div> 

CSS

div { 
    color: white; 
    margin: 20px; 
    padding: 5px 18px; 
    font: 700 16px/200% sans-serif; 
} 
#div1 { 
    background-color: #d00; 
} 
#div2 { 
    background-color: #27d; 
} 

Bây giờ jQuery:

Mở tài liệu sẵn sàng chỉ (https://jsfiddle.net/sz7aeo9j/)

<script> 
    $(document).ready(function() { 
     var divone = $('#div1')[0].outerHTML 
     var divtwo = $('#div2')[0].outerHTML 
     $('#div2,#div1').remove(); 
     if ($(window).width() < 640) { 
      $('#div1').remove(); 
      $('#wrapper').html(divtwo); 
     } 
     if ($(window).width() > 640) { 
      $('#div2').remove(); 
      $('#wrapper').html(divone); 
     } 
    }); 
</script> 

Mở cửa sổ thay đổi kích thước (https://jsfiddle.net/sz7aeo9j/1/)

<script> 
    $(document).ready(function() { 
     var divone = $('#div1')[0].outerHTML 
     var divtwo = $('#div2')[0].outerHTML 
     $('#div1').remove(); 
     $(window).resize(function() { 
      if ($(window).width() < 640) { 
       $('#div1').remove(); 
       $('#wrapper').html(divtwo); 
      } 
      if ($(window).width() > 640) { 
       $('#div2').remove(); 
       $('#wrapper').html(divone); 
      } 
     }); 
    }); 
</script>