• Post category:JavaScript
  • Reading time:3 mins read

Today we’ll show you how to get the browser window size in JavaScript. In the previous article, we discussed How to get the screen size using JavaScript.

Here, we will show you the two different methods to get the outer and inner size of the browser.

Get the two different types of the window size

  1. Get the window outer size
  2. Get the window inner size

1. Get the window outer size

window.outerWidth
Gets the width of the outside of the browser window.

window.outerHeight
Gets the height of the outside of the browser window.

const windowOuterWidth  = window.outerWidth; // Output: 1109
const windowOuterHeight = window.outerHeight; // Output: 620
Browser window outer size - Code Premix
Browser window outer size – Code Premix

2. Get the window inner size

window.innerWidth
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.

window.innerHeight
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.

const windowInnerWidth  = window.innerWidth; // Output: 780
const windowInnerHeight = window.innerHeight; // Output: 532
Browser window inner size - Code Premix
Browser window inner size – Code Premix

I hope you find this article helpful.
Thank you for reading. Happy Coding..!!

Leave a Reply