Reliably get viewport dimensions in JS

getViewportSize.js

/*!
 An experiment in getting accurate visible viewport dimensions across devices
 (c) 2012 Scott Jehl. 
 MIT/GPLv2 Licence
*/

function viewportSize(){
	var test = document.createElement( "div" );

	test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;";
	document.documentElement.insertBefore( test, document.documentElement.firstChild );
	
	var dims = { width: test.offsetWidth, height: test.offsetHeight };
	document.documentElement.removeChild( test );
	
	return dims;
}


// Notes:
// relies on position:fixed support, but it should work in browsers that partially support position: fixed like iOS4 and such... 

//sample usage: var viewportwidth = viewportSize().width;

1. setting all sides to 0 stretches a positioned element to fill the space between. similar to width: 100% without saying as much. 2. I'm concerned with getting visible viewport size. window.innerHeight is often taller than that, particularly on mobile devices. Also, screen.availHeight doesn't always account for browser chrome size

…

On Mar 17, 2012, at 1:12 AM, Justin C. Rounds wrote: Curious about a couple of things: 1. Aren't the top and left attributes overwritten by the bottom and right attributes, and therefore unnecessary? 2. In what cases do using window.innerWidth and window.innerHeight fail to return accurate dimensions? --- Reply to this email directly or view it on GitHub: https://gist.github.com/2051999

Oh wicked — I've been doing something similar using a div set to display: table and 100% width/height, but this allows for pixel offsets which is nice.

Thanks for sharing!

I've been working on a similar solution to get my javascript to fire at the same time my media queries fire on page load/resize. Webkit browsers currently render media query dimensions without the scrollbar widths, where other browsers, FF, Opera, IE9 do count scrollbar widths into the overall viewport dimensions.

matchMedia worked somewhat for what I was trying to do, but I was using respond.js for oldIE and was unable to get matchMedia.js to work on resize in oldIE so I went back to detecting the window.innerWidth to get the viewport width. I tried to fork your gist, but kept getting a 404 error when I clicked on the fork button. Anyways, here's my stab at accurately getting viewport width, I only needed the width for what I'm using it for but the concept could be expanded to get the viewport height.

Accurate viewport width:
https://gist.github.com/2399828

thx a lot.
You saved a couple of my hours

Please see comments in http://stackoverflow.com/a/36132694/1722625

THANKS!

It is now 7 years after you first posted this, and this weekend I found myself needing this functionality. I have been all over Stackoverflow and a whole pile of other sites, googling like crazy. The question has been asked a zillion times and there are ten zillion answers out there - and NONE of them work. At least not in Firefox 67.0.4. None, that is, except for yours. Thank you thank you thank you!

This is FANTASTIC!!!