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

Question

Comment puis-je faire en sorte que chaque fois que l'utilisateur change la taille de la résolution de l'écran [pas la fenêtre du navigateur], la page exécute une fonction ?

Answer 1

Ok, donc vous utilisez jQuery. Alors créons un événement personnalisé pour ça.

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

Maintenant $(window).bind('resolutionchange', fn) devrait faire ce que vous voulez.

Answer 2

$(window).resize()

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

$(window).resize(function() {

alert('window was resized!');

});

Answer 3

Essayez de suivre screen.width y screen.height . Ils renverront des valeurs différentes lorsque la résolution de l'écran sera modifiée. Plus d'infos aquí .

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

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

Une autre façon de procéder consistera donc à utiliser un fichier setTimeout() comme : [ non recommandé ]

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

checkScreenSize();

Le site recommandé utilisera la version requestAnimationFrame . Comme décrit aquí par Paul Irish. Parce que si vous exécutez la boucle dans un onglet qui n'est pas visible, le navigateur ne la maintiendra pas en exécution. 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 en La réponse de Nathan Un événement jQuery personnalisé qui est déclenché lors d'un changement de résolution et qui utilise requestAnimationFrame. lorsque disponible pour une utilisation moindre de la mémoire :

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!');
});

Answer 4

Étant donné que vous ne pouvez vérifier les changements qu'à l'intérieur d'une fenêtre de navigateur spécifique, il est impossible de connaître les changements de résolution de l'affichage.

Cependant, si la fenêtre du navigateur change également lorsque la résolution de l'écran change, vous pouvez l'attraper avec un écouteur sur les paramètres window.width et window.height.

edit : Il semble que nous pouvons obtenir les informations que vous voulez à partir de l'objet global 'window.screen'. Voir https://developer.mozilla.org/en/DOM/window.screen.height y https://developer.mozilla.org/en/DOM/window.screen.width pour plus d'informations !

Answer 5

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 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>