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 make one div somewhere on the page and put this code:

<div id="winSize"></div>
<script>
    var WindowsSize=function(){
        var h=$(window).height(),
            w=$(window).width();
        $("#winSize").html("<p>Width: "+w+"<br>Height: "+h+"</p>");
    };
   $(document).ready(WindowsSize); 
   $(window).resize(WindowsSize); 
</script>

Here is a snippet:

_x000D_

var WindowsSize=function(){_x000D_
     var h=$(window).height(),_x000D_
      w=$(window).width();_x000D_
     $("#winSize").html("<p>Width: "+w+"<br>Height:"+h+"</p>");_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_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<div id="winSize"></div>

_x000D_

Of course, adapt it to fit your needs! ;)

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

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

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

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

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

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

Examples related to javascript

Examples related to jquery