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