How can I detect window size with jQuery

Question

How can I detect window browser size with jQuery like Gmail  In Gmail  we don t need to refresh or reload current page as soon as we have changed window resolution in window setting  In my project  I need to refresh the browser as soon as window setting has been changed   Any idea will be appreciated

User · Answer

You can get the values for the width and height of the browser using the following:

$(window).height();
$(window).width();

To get notified when the browser is resized, use this bind callback:

$(window).resize(function() {
    // Do something
});

User · Answer

You cannot really find the display resolution from a web page  There is a CSS Media Queries statement for it  but it is poorly implemented in most devices and browsers  if at all  However  you do not need to know the resolution of the display  because changing it causes the  pixel  width of the window to change  which can be detected using the methods others have described     window  resize function          This will execute whenever the window is resized     window  height       New height     window  width       New width       You can also use CSS Media Queries in browsers that support them to adapt your page s style to various display widths  but you should really be using em units and percentages and min-width and max-width in your CSS if you want a proper flexible layout  Gmail probably uses a combination of all these

User · Answer

You make one div somewhere on the page and put this code    lt div id  winSize  gt  lt  div gt   lt script gt      var WindowsSize function            var h   window  height                w   window  width                winSize   html   lt p gt Width    w   lt br gt Height    h   lt  p gt                 document  ready WindowsSize         window  resize WindowsSize     lt  script gt    Here is a snippet   x000D   x000D  var WindowsSize function    x000D       var h   window  height    x000D        w   window  width    x000D           winSize   html   lt p gt Width    w   lt br gt Height   h   lt  p gt     x000D      x000D     document  ready WindowsSize    x000D     window  resize WindowsSize    x000D   winSize  x000D    position fixed  x000D    bottom 1   x000D    right 1   x000D    border rgba 0 0 0 0 8  3px solid  x000D    background rgba 0 0 0 0 6   x000D    padding 5px 10px  x000D    color  fff  x000D    text-shadow  000 1px 1px 1px  000 -1px 1px 1px  x000D    z-index 9999 x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div id  winSize  gt  lt  div gt  x000D   x000D   x000D    Of course  adapt it to fit your needs

User · Answer

You could also use plain Javascript window innerWidth to compare width    But use jQuery s  resize   fired automatically for you      window   resize function          your code           http   api jquery com resize

User · Answer

get dimensions  var height     window  height    var width     window  width       refresh on resize   window  resize function       location reload true        not sure if you wanted to tinker with the dimensions of elements or actually refresh the page  so here a bunch of different things pick what you want   you can even put the height and width in the resize event if you really wanted

User · Answer

Do you want to detect when the window has been resized   You can use JQuery s resize to attach a handler

[javascript] How can I detect window size with jQuery?

Examples related to javascript

Examples related to jquery