Detectar cambiar el tamaño de la ventana y realizar la función con jquery

Question

¿Cómo puedo hacer para que cada vez que el usuario cambie el tamaño de la ventana, la página realice una función?

Answer 1

la siguiente función debe hacer lo que tiene, que funciona en todos los navegadores (con la única excepción de no disparar cuando Safari no está maximizada y cambia la resolución)

Se dispara sobre la ventana de redimensionamiento como así como la resolución cambia y también tiene un retraso para evitar múltiples llamadas mientras el usuario está redimensionando la ventana.

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

puede registrar un evento onresize en la ventana: una función es llamada cuando el tamaño de la ventana cambia

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

Answer 3

Usar screen.width y screen.height para determinar la anchura y altura de la pantalla.

Answer 4

En lo que respecta a este artículo: https://developer.mozilla.org/en-US/docs/DOM/window.onresize

window.onresize = resize; 

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

window.resize hace que sea muy sencillo.

Answer 5

Mi proposición. Primer 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; 
} 

Ahora el jQuery:

El documento listo única (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> 

al redimensionar la ventana (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>