tamaño - jquery redimensionar ventana

¿Cómo detectar en jquery si cambia la resolución de la pantalla?

Question

¿Cómo puedo hacer que cada vez que el usuario cambie el tamaño de resolución de la pantalla [no la ventana del navegador], la página realice una función?

Answer 1

Debido a que solo puede verificar dentro de una ventana específica del navegador los cambios dentro de la misma ventana del navegador, no es posible conocer los cambios de resolución de la pantalla.

Sin embargo, si la ventana del navegador también cambia cuando cambia la resolución de la pantalla, puede detectar esto con un oyente en window.width y window.height.

Editar: Parece que podemos obtener la información que desee del objeto global ''window.screen''. ¡Vea https://developer.mozilla.org/en/DOM/window.screen.height y https://developer.mozilla.org/en/DOM/window.screen.width para más información!

Answer 2

Intenta rastrear screen.width y screen.height . Volverán valores diferentes al cambiar la resolución de la pantalla. Más información here .

function doSomething(){
    if ( screen.width < 1280 ){
        console.log(''Too small'')
    }else{
        console.log(''Nice!'')
    }
}

Sin embargo, hasta donde sé, no hay eventos activados al cambiar la resolución de la pantalla; Lo que significa que no puede hacer esto $(screen).resize(function(){/*code here*/});

Así que otra forma de hacerlo será usando un setTimeout() como: [ no recomendado ]

var timer,
    checkScreenSize = function(){
        if ( screen.width < 1280 ){
            console.log(''Too small'')
        }else{
            console.log(''Nice!'')
        }
        timer = setTimeout(function(){ checkScreenSize(); }, 50);
    };

checkScreenSize();

La versión recomendada utilizará requestAnimationFrame . Como lo describe here Paul Irish. Porque si está ejecutando el bucle en una pestaña que no está visible, el navegador no lo mantendrá funcionando. Para un mejor rendimiento general.

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage: 
// instead of setInterval(checkScreenSize, 50) ....

(function loop(){
  requestAnimFrame(loop);
  checkScreenSize();
})();

[actualizar]

Para aquellos que quieran implementar requestAnimationFrame en la respuesta de Nathan , ahí van; Un evento jQuery personalizado que se activa al cambiar la resolución, usa requestAnimationFrame cuando está disponible para un menor uso de memoria:

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();

var width = screen.width,
    height = screen.height,
    checkScreenSize = function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger(''resolutionchange'');
        }
    };

(function loop(){
  requestAnimFrame(loop);
  checkScreenSize();
})();

Uso:

$(window).bind(''resolutionchange'', function(){
    console.log(''You have just changed your resolution!'');
});

Answer 3

La siguiente función se activa al cambiar el tamaño de la ventana, así como al cambio de resolución, y también tiene un retraso para evitar llamadas múltiples mientras el usuario está redimensionando la ventana.

He establecido un violín para usted aquí:

http://jsfiddle.net/EJK5L/

Cambia tu resolución y la función te alerta. Puedes realizar cualquier función, lo que quieras.

Espero que esto ayude.

Answer 4

Ok, entonces estás usando jQuery. Así que vamos a hacer un evento personalizado para ello.

(function () {
    var width = screen.width,
        height = screen.height;
    setInterval(function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger(''resolutionchange'');
        }
    }, 50);
}());

Ahora $(window).bind(''resolutionchange'', fn) debe hacer lo que quieras.

Answer 5

Prueba este js:

var width = $(window).width();
var height = $(window).height(); 
var screenTimer = null;

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

    function getScreen (){
        return { ''height'' : getHeight (), ''width'': getWidth () };
    }
    screenTimer = setInterval ( getScreen (), 50 );
}
function getHeight (){
    console.log ( ''height: '' + height);
    $(''#height'').text(height);
    return height;
}
function getWidth (){
    console.log ( ''width: '' + width);
    $(''#width'').text(width);
     return width;   
}
detectScreen ();

$(''#go'').click (function (){
    detectScreen ();
});

$(''#stop'').click (function (){
    clearInterval(screenTimer);
});

Y para html:

<span id="stop">Stop</span> | <span id="go">Go</span>
<br>
<div>height: <span id="height"></span> px</div>
<div>width: <span id="width"></span>px </div>

Answer 6

$(window).resize()

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

$(window).resize(function() {

alert(''window was resized!'');

});