Comment détecter dans jquery si la résolution de l'écran change?

$(window).resize()

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

$(window).resize(function() {

alert('window was resized!');

});

suivi de screen.width et screen.height. Ils retourneront différentes valeurs lors de la modification de la résolution de l'écran. Plus d'infos ici.

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

Cependant, autant que je sache il n'y a pas d'événements déclenchés lors de la modification de la résolution de l'écran; ce qui signifie que vous ne pouvez pas faire cela $(screen).resize(function(){/*code here*/});

Donc, une autre façon de le faire sera d'utiliser un setTimeout() tel que: [pas recommandé]

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

checkScreenSize();

le recommandé version requestAnimationFrame. Tel que décrit ici par Paul Irish. Parce que si vous exécutez la boucle dans un onglet qui n'est pas visible, le navigateur ne le fera pas fonctionner. Pour une meilleure performance globale.

// 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();
})();

[mise à jour]

pour ceux qui veulent implémenter requestAnimationFrame dans la réponse de Nathan, voilà; un événement jQuery personnalisé qui est déclenché sur le changement de résolution, utilise requestAnimationFrame si disponible pour les moins de mémoire d'utilisation:

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();
})();

Utilisation:

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

parce que vous ne pouvez vérifier les changements que depuis une fenêtre spécifique de votre navigateur, il n'est pas possible de connaître la résolution-les changements de l'affichage.

cependant, si la fenêtre du navigateur change aussi lorsque la résolution de l'affichage change, vous pouvez l'attraper avec un écouteur sur la fenêtre.la largeur et la fenêtre.hauteur.

edit: il semble que nous pouvons obtenir les informations que vous voulez à partir de la fenêtre globale'.l'écran de l'objet. Voir https://developer.mozilla.org/en/DOM/window.screen.height et https://developer.mozilla.org/en/DOM/window.screen.width pour plus d'informations!

Essayez ce 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);
});

Et pour le code 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>

la fonction suivante s'allume lors du re-dimensionnement de la fenêtre ainsi que lors d'un changement de résolution et a également un délai pour éviter les appels multiples pendant que l'utilisateur re-dimensionne la fenêtre.

j'ai mis en place un violon pour vous ici:

http://jsfiddle.net/EJK5L/

modifiez votre résolution et la fonction vous alerte. vous pouvez exécuter n'importe quelle fonction, ce que vous voulez.

J'espère que cela vous aidera.