Определить размер окна и выполнить функцию с помощью jquery

Question

Как я могу сделать так, чтобы каждый раз, когда пользователь менял размер окна, страница выполняет функцию?

Answer 1

Следующая функция должна делать то, что вам нужно, это работает на всех браузерах (с единственным исключением, не стреляя, когда Safari не развернуто и разрешение изменения)

Он выстреливает на окно изменения размера, как а также изменение разрешения, а также имеет задержку, чтобы избежать множественных вызовов, когда пользователь переустанавливает окно.

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

вы можете зарегистрировать событие OnResize на окне: функция вызывается при изменении размера окна

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

Answer 3

Использование screen.width и screen.height для определения ширины и высота экрана.

Answer 4

В отношении к этой статье: https://developer.mozilla.org/en-US/docs/DOM/window.onresize

window.onresize = resize; 

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

window.resize делает его довольно просто.

Answer 5

Мое предложение. Первый HTML & 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; 
} 

Теперь JQuery:

В документе готовы только (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> 

На изменении размера окна (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>