How can I refresh the screen on browser resize?

Question

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?

When you say "if the browser is scaled down" do you mean the user resizes the browser window OR the user zooms out (Ctrl- or Cmd-)? Totally different situations. — RwwL, Apr 29 '11 at 20:23
#Check my answer : Its perfect and tested: http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery/17059269#17059269 — Abhishek Goel, Jun 12 '13 at 06:52

JR Smith · Accepted Answer · 2017-09-14T12:56:16.990

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

Too much calculation at resize, it requires a setTimeout. – Olivier C Sep 05 '22 at 17:45 — Olivier C, Sep 05 '22 at 17:45

score 27 · Answer 2 · edited Nov 21 '16 at 04:29

27

Here's a pure JS solution, because I think it's not fair to use jQuery for everything.

window.addEventListener('resize', function () { 
    "use strict";
    window.location.reload(); 
});

A drawback is that it won't work in IE "browser" older than 9.

edited Nov 21 '16 at 04:29

David Archibald

1,431
14
27

answered Aug 19 '13 at 19:06

uKolka

36,422
4
33
44

When I use this script, each time I scroll on mobile the browser reloads, any thoughts how to get around that? – Heather New Oct 13 '20 at 17:16
@HeatherNew maybe look into `window.matchMedia` to avoid running it on mobile. – uKolka Oct 14 '20 at 20:59

aWebDeveloper · Answer 3 · 2017-10-24T07:13:05.283

5

Simple. This doesn't fire multiple events just one event every x second(s). The accepted answer will throw too many events

var resizeTimeout;
window.addEventListener('resize', function(event) {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function(){
    window.location.reload();
  }, 1500);
});

for jQuery replace window.addEventListener('resize' with $(window).resize

edited Oct 24 '17 at 07:13

answered May 03 '16 at 15:51

aWebDeveloper

36,687
39
170
242

2

This is an important concern if you want the user to be able to drag the corner of the window, and deserves to be higher up. – Adam Chalcraft Feb 13 '20 at 02:04

proximus · Answer 4 · 2011-04-29T20:12:38.330

5

If you're looking for a jQuery solution, you can use something like this:

$(window).bind('resize', function() {
     location.reload();
});

Maybe it makes sense to additionally use a timeout...

edited Apr 29 '11 at 20:12

answered Apr 29 '11 at 20:06

proximus

689
7
20

1

In this case, it doesn't really matter because it'll just reload the page the first time resize is called. Use a timeout when you're actually running code on resize that might be repeated many hundreds of times by WebKit or IE, who fire that event a lot while the window is being resized. – RwwL Apr 29 '11 at 20:21

score 3 · Answer 5 · answered Mar 08 '21 at 13:22

The already mentioned solutions work for the most of the cases. Safari on mobile devices (like tablets or phones) slightly changes the resolution when a user starts scrolling. This yields to an unusable page because the site refresehes when the user starts scrolling. To avoid this, set a threshold in px. If the browser resizes above this threshold, the page will reload. A jQuery solution might look like this:

var w = $(window).width();
var h = $(window).height();
var threshold = 100
$(window).resize(function(){
    widthDiff = Math.abs($(window).width()-w);
    heightDiff = Math.abs($(window).height()-h);
    if (widthDiff < threshold && heightDiff < threshold) return;
    w = $(window).width();
    h = $(window).height();

    $(window).resize(function(){
        location.reload();
    });
});

score 2 · Answer 6 · answered May 24 '14 at 06:00

2

$(window).resize( function() {

window.location.href = window.location.href;

});

This one worked for me!

answered May 24 '14 at 06:00

Luke

21
1

score 2 · Answer 7 · answered Nov 18 '15 at 10:18

2

There is a problem if someone drag window to resize - there would be too many resize events.

It is better to use timer, to clean that up:

$(window).on('resize', function () {

    if (timeoutId) {
        clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(function () {
        location.reload();
    }, 500);
});

answered Nov 18 '15 at 10:18

Dampas

323
2
6

That is a problem everyone is ignoring here! Your code needs a `var timeoutId = false;` before the first line though. – Hafenkranich Feb 27 '23 at 11:05

score 1 · Answer 8 · answered Oct 04 '13 at 03:21

1

Just use this code

$(window).resize( function() {

window.location.href = window.location.href;

});

Hope it useful

answered Oct 04 '13 at 03:21

Sakata Gintoki

1,817
16
23

score 1 · Answer 9 · answered Apr 29 '11 at 20:01

1

There is an onresize event you can listen for:

https://developer.mozilla.org/en/DOM/element.onresize

answered Apr 29 '11 at 20:01

DA.

39,848
49
150
213

How can I refresh the screen on browser resize?

9 Answers9

Linked

Related