How can I refresh the screen on browser resize?

Is it possible to refresh a page on browser size change? I use some styles that create areas on a page and if the browser is scaled down the layout break.

Perhaps I can detect the document size change with jQuery?

Answer

Update for anyone viewing this now. JQuery now considers bind a deprecated function.

And the way proximus’ response works (at least in Opera/Chrome/Firefox) it constantly polls for resizing even if the browser is just sitting there. It appears that the resize function was called automatically when it hit location.reload(), causing it to hit an infinite loop. Here’s what I pulled together that also solved the problem.

jQuery(function($){
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();

  $(window).resize(function() {
    if(windowWidth != $(window).width() || windowHeight != $(window).height()) {
      location.reload();
      return;
    }
  });
});

Leave a Reply

Your email address will not be published. Required fields are marked *