35

i know that you with $(window).width() can get the size of the web browser.

i want to detect when the user change the size of his web browser so i could readjust the columns width. is there a way to automatically detect this or do i have to use setTimeinterval to loop and see if it has changed?

Josua Marcel C
  • 3,122
  • 6
  • 45
  • 87
ajsie
  • 77,632
  • 106
  • 276
  • 381
  • 1
    Keep in mind that if what you want to do is to modify you design (= CSS) when the screen size change, what you are looking for is [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). You don't need any JS to do that. For example: `@media max-width: 700px { body { yourCSS } }` will style the body element only when the screen is less than 700px wide. – Fla Aug 27 '19 at 15:38

8 Answers8

55

Try the resize event

$(window).resize(function() {
  console.log('window was resized');
});
PetersenDidIt
  • 25,562
  • 3
  • 67
  • 72
  • This is also triggerd by mobile browsers zoom, there should be an if there to manually check the sizes against a previous value. – Hoffmann Aug 30 '13 at 13:54
  • But this is not quite what was asked (or what I'm looking for). If, for example, you download a file in chrome then the "downloads" bar at page bottom appears, changing your browser height and correctly triggering the resize event. That's not a width change, so you get an event you need to filter out (which is what I am looking for...) – philw Oct 12 '16 at 15:17
37

Writing this down cause somehow none of these answers give the modern best-practices way of doing this:

window.addEventListener("resize", function(event) {
    console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
B T
  • 57,525
  • 34
  • 189
  • 207
21

The JavaScript event is named window.onresize.

The JQuery binding is named .resize()

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
8

In MDN they give a really good Javascript standalone code:

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

If you need just this kind of functionality I would recommend to go for it.

jasmo2
  • 525
  • 7
  • 13
5

You might want to use debounce : https://davidwalsh.name/javascript-debounce-function

Otherwise the 

window.addEventListener("resize")

Will fire the whole time as the window resize is in progress. Which will tax your CPU overhead.

Aurasphere
  • 3,841
  • 12
  • 44
  • 71
Luke Dohner
  • 191
  • 1
  • 5
3

Something to keep in mind- in IE, at least, resize events bubble, and positioned elements and the document body can fire independent resize events.

Also, IE fires a continuous stream of 'resize' events when the window or element is resized by dragging. The other browsers wait for the mouseup to fire.

IE is a big enough player that it is useful to have an intermediate handler that fields resize events- even if you branch only IE clients to it.

The ie handler sets a short timeout(100-200 msec)before calling the 'real' resize handler. If the same function is called again before the timeout, it is either a bubblng event or the window is being dragged to a new size, so clear the timeout and set it again.

kennebec
  • 102,654
  • 32
  • 106
  • 127
2

Here's a little piece of code I put together for the same thing.

(function () {
    var width = window.innerWidth;

    window.addEventListener('resize', function () {
       if (window.innerWidth !== width) {
           window.location.reload(true);
       }
    });
})();
Anshul Sanghi
  • 84
  • 2
  • 9
1

I use media="only screen and (min-width: 750px)" href="... css file for wide windows" media="only screen and (max-width: 751px)" href="...css file for mobiles"

When I move the right windows border left and right to increase and decrease my window size, my web browser will automatically switch from the wide window to the mobile. I do not have to include any Javascript code to detect window width. This works for Chrome, Firefox and Internet Explorer on both Windows and Macintosh computers.

Jacob Palme
  • 11
  • 1