web-dev-qa-db-fra.com

Comment détecter en jquery si la résolution d'écran change?

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

jqueryscreenscreen-resolution
30
Safran Ali

Ok, vous utilisez donc jQuery. Faisons donc un événement personnalisé pour cela.

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

36
Nathan MacInnes

$(window).resize()

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

$(window).resize(function() {

alert('window was resized!');

});
17
Benno

Essayez de suivre screen.width Et screen.height. Ils renverront des valeurs différentes lors du changement de la résolution d'écran. Plus d'infos ici .

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

Cependant, pour autant que je sache aucun événement n'est déclenché lors du changement de la résolution de l'écran; Ce qui signifie que vous ne pouvez pas faire cela $(screen).resize(function(){/*code here*/});

Une autre façon de le faire sera donc d'utiliser une setTimeout() telle que: [ non recommandé ]

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

checkScreenSize();

La version recommandée utilisera requestAnimationFrame . Comme 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 la continuera pas. Pour de meilleures performances globales.

// 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 réponse de Nathan , c'est parti; Un événement jQuery personnalisé qui est déclenché lors d'un changement de résolution, utilise requestAnimationFrame lorsqu'il est 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();
})();

Usage:

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

Étant donné que vous pouvez uniquement à partir d'une fenêtre de navigateur spécifique rechercher des modifications dans cette même fenêtre de navigateur, il n'est pas possible de connaître les changements de résolution de l'affichage.

Cependant, si la fenêtre du navigateur change également lorsque la résolution d'affichage change, vous pouvez le détecter avec un écouteur sur window.width et window.height.

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

3
Willem Mulder

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 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>
2
Arnaud Méhat

La fonction suivante se déclenche lors du redimensionnement de la fenêtre ainsi que du changement de résolution et a également un délai pour éviter les appels multiples pendant que l'utilisateur redimensionne la fenêtre.

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

http://jsfiddle.net/EJK5L/

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

J'espère que cela t'aides.

1
AlphaMale