Search code examples
jqueryscreenscreen-resolution

How to detect in jquery if screen resolution changes?


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?


Solution

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