Home » JavaScript

Window innerWidth and innerHeight Properties in JavaScript

JavaScript innerWidth and innerHeight Properties: In this tutorial, we are going to learn about the innerWidth and innerHeight properties with examples in JavaScript. Submitted by Siddhant Verma, on November 23, 2019

We know that the window object in JavaScript has loads of different properties and methods attached to it.

    console.log(window);

Output:

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
	$: ƒ $(id)
	Iframe: ƒ (a,b,c,d,e,f,g)
	IframeBase: ƒ (a,b,c,d,e,f,g,k)
	IframeProxy: ƒ (a,b,c,d,e,f,g)
	IframeWindow: ƒ (a,b,c,d,e,f,g)
	LocalNTP: ƒ LocalNTP()
	ToolbarApi: ƒ ()
	alert: ƒ alert()
	applicationCache: ApplicationCache {status: 0, oncached: null, onchecking: null, ondownloading: null, onerror: null, …}
	atob: ƒ atob()
	blur: ƒ ()
	btoa: ƒ btoa()
	caches: CacheStorage {}
	cancelAnimationFrame: ƒ cancelAnimationFrame()
	cancelIdleCallback: ƒ cancelIdleCallback()
	captureEvents: ƒ captureEvents()
	chrome: {embeddedSearch: {…}, loadTimes: ƒ, csi: ƒ}
	clearInterval: ƒ clearInterval()
	clearTimeout: ƒ clearTimeout()
	clientInformation: Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, hardwareConcurrency: 4, …}
	close: ƒ ()
	closed: false
	closure_lm_665802: _.Ye {src: Window, b: {…}, f: 4}
	closure_uid_257079167: 1
	colorArrayToHex: ƒ colorArrayToHex(color)
	configData: {chromeColors: false, chromeColorsCustomColorPicker: false, enableShortcutsGrid: false, googleBaseUrl: "https://www.google.com/", hideShortcuts: false, …}
	confirm: ƒ confirm()
	createImageBitmap: ƒ createImageBitmap()
	crypto: Crypto {subtle: SubtleCrypto}
	customElements: CustomElementRegis
	…

There are two properties of this window object that we'll talk about today: innerWidth and innerHeight.

    window.innerHeight;
    window.innerWidth;

Output

324
1366

JavaScript - innerHeight Property

As the name suggests the innerHeight property returns us the height of the current window and the innerWidth property returns us the width of the current window. Since these properties are attached to the size of the window, resizing their values must change. Resize the window of your browser and see these properties again.

window.innerHeight;
window.innerWidth;

Output

166
736

Thus it's clear that these properties attach themselves to the current dimensions of the window and every time you resize your window you get a different value.

However, there's a small catch. You must be thinking how come the values for the height are so small if they are in pixel?

    window.outerHeight;
    window.innerHeight;

Output

728
150

When I opened a fresh window and types these out on the dev console of the browser, I get two different values. This suggests that there must be some difference between outerHeight and innerHeight properties.

JavaScript - outerHeight Property

The outerHeight property gets you the height of the whole window whereas the innerHeight property gets you the height of only the window's content area. For example, if you resize the window of the dev console it takes up the area of your current window. This way the innerHeight property changes it's valued since now the window's content area has reduced in order to accommodate the height of the console. However, the outerHeight property remains unchanged since the size of the whole window remains the same. Only the content inside the window is changing its height, not the whole window.

    window.innerHeight;
    window.outerHeight;

Output

304
728

I smashed down the dev console to reduce its height and we get more height for the window's content. The outerHeight remains the same but the innerHeight increases. Let's resize the window now,

    window.outerHeight;
    window.innerHeight;

Output

506
150

Now both the values change. Similarly, we can differentiate between the innerWidth and outerWidth properties too.

    window.innerWidth;
    window.outerWidth;

Output

736
752

Notice how small the difference is between the two? This is because when you resize the window, the inner and outer width almost remains the same as your dev console is occupying space in the y-direction so it barely affects the innerWidth property. However, if I dock it to the side,

window.innerWidth;
window.outerWidth;

Output

495
752

You can now see a remarkable difference between the two as the dev console is docked to the side so it occupies space in the x-direction more and takes the window’s inner width to fit itself. Remember, these values are in pixels.