How to detect in jquery if screen resolution changes?

Safran Ali picture Safran Ali · Dec 20, 2011 · Viewed 72.1k times · Source

How can I make it so that each time when user changes the screen resolution size [not the browser window], the page perform a function?

Answer

Nathan MacInnes picture Nathan MacInnes · Dec 20, 2011

Ok, so you're using jQuery. So let's make a custom event for it.

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

Now $(window).bind('resolutionchange', fn) should do what you want.