Browser Size (Width and Height)

Question

I am trying to determine the current browser size (width and height). I know that it is very simple in jQuery with $(document).width and $(document).height , but I do not want to add the jQuery lib size to the project, so I would rather use the built-in JavaScript. What would be a short and efficient way to do the same with JavaScript?

Answer 1

 // first get the size from the window // if that didn't work, get it from the body var size = { width: window.innerWidth || document.body.clientWidth, height: window.innerHeight || document.body.clientHeight } 

Answer 2

 function getWindowSize(){ var d= document, root= d.documentElement, body= d.body; var wid= window.innerWidth || root.clientWidth || body.clientWidth, hi= window.innerHeight || root.clientHeight || body.clientHeight ; return [wid,hi] } 

IE browsers are the only ones that don't use innerHeight and Width.

But there are no standard "browser implementations."

Check the html (document.documentElement) clientHeight before checking the body- if it is not 0, this is the height of the viewport, and body.clientHeight is the height of the body, which can be larger or smaller than the window.

The reverse mode returns 0 for the root element and the height of the window (viewport) from the body.

Same thing with width.

Answer 3

Try it;

  <script type="text/javascript"> winwidth=document.all?document.body.clientWidth:window.innerWidth; winHeight=document.all?document.body.clientHeight:window.innerHeight; alert(winwidth+","+winHeight); </script> 

Answer 4

Here is a sample code

 function getSize(){ var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight; } 

Answer 5

In my case, window.innerWidth involved in creating a custom modal popup. Simply put, the user presses a button, a pop-up window opens in the center of the browser, and a transparent black bkgd appears behind the pop-up window. My problem was finding the width and height of the browser to create transparent bkgd.

window.innerWidth works great to find the width, but remember that window.innerWidth and window.innerHeight does not compensate for the scrollbars, so if your content goes beyond the visible area of ​​the content. I had to subtract 17px from the value.

 transBkgd.style.width = (window.innerWidth - 17) + "px"; 

Since the content of the site always goes beyond the visible height, I could not use window.innerHeight . If the user scrolls down, transparent bkgd would end at that moment, and it looked just nasty. To maintain transparent bkgd all the way to the bottom of the content, I used document.body.clientHeight .

 transBkgd.style.height = document.body.clientHeight + "px"; 

I tested the popup in IE, FF, Chrome, and it looks good in all directions. I know that this is not too closely related to the original question, but I believe that this can help if someone else runs into the same problem when creating a custom modal popup.