wake-up-neo.com

Wie erkennt man in jquery, ob sich die Bildschirmauflösung ändert?

Wie kann ich dafür sorgen, dass die Seite bei jeder Änderung der Bildschirmauflösung [nicht des Browserfensters] eine Funktion ausführt?

30
Safran Ali

Ok, Sie verwenden also jQuery. Machen wir also ein benutzerdefiniertes Ereignis dafür.

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

Nun sollte $(window).bind('resolutionchange', fn) tun, was Sie wollen.

36
Nathan MacInnes

$(window).resize()

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

$(window).resize(function() {

alert('window was resized!');

});
17
Benno

Versuchen Sie, screen.width Und screen.height Zu verfolgen. Sie geben unterschiedliche Werte zurück, wenn Sie die Bildschirmauflösung ändern. Weitere Infos hier .

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

Allerdings soweit ich weiß werden beim Ändern der Bildschirmauflösung keine Ereignisse ausgelöst; Was bedeutet, dass Sie dies nicht tun können $(screen).resize(function(){/*code here*/});

Eine andere Möglichkeit ist die Verwendung einer setTimeout() wie: [ nicht empfohlen ]

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

checkScreenSize();

In der empfohlenen Version wird requestAnimationFrame verwendet. Wie beschrieben hier von Paul Irish. Wenn Sie die Schleife in einem Tab ausführen, der nicht sichtbar ist, wird sie vom Browser nicht weiter ausgeführt. Für eine bessere Gesamtleistung.

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

[Update]

Für diejenigen, die requestAnimationFrame in Nathans Antwort implementieren möchten, kann es losgehen. Ein benutzerdefiniertes jQuery-Ereignis, das bei einer Änderung der Auflösung ausgelöst wird, verwendet requestAnimationFrame falls verfügbar für eine geringere Speichernutzung:

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

Verwendung:

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

Da Sie nur in einem bestimmten Browser-Fenster nach Änderungen in demselben Browser-Fenster suchen können, ist es nicht möglich, Informationen über Änderungen der Auflösung der Anzeige zu erhalten.

Wenn sich das Browserfenster jedoch auch ändert, wenn sich die Anzeigeauflösung ändert, können Sie dies mit einem Listener auf window.width und window.height erfassen.

edit: Anscheinend können wir die gewünschten Informationen aus dem globalen 'window.screen'-Objekt abrufen. Siehe https://developer.mozilla.org/en/DOM/window.screen.height und https://developer.mozilla.org/en/DOM/window.screen). width für mehr Informationen!

3
Willem Mulder

Versuchen Sie dieses 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);
});

Und für 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

Die folgende Funktion wird bei der Größenänderung des Fensters sowie bei der Änderung der Auflösung ausgelöst und hat eine Verzögerung, um mehrere Aufrufe zu vermeiden, während der Benutzer die Größe des Fensters ändert.

Ich habe hier eine Geige für dich aufgestellt:

http://jsfiddle.net/EJK5L/

Ändern Sie Ihre Auflösung und Funktion benachrichtigt Sie. Sie können jede Funktion ausführen, was Sie wollen.

Hoffe das hilft.

1
AlphaMale