Get the size of the CSS viewport using JavaScript.
Switch branches/tags
Nothing to show
Clone or download
Tyson Matanich
Tyson Matanich Branch from GetViewportWidth
Updated to also support height and renamed to viewportSize.
Latest commit ff30d83 Jan 7, 2013


Allows you to get the width and height of the CSS viewport using JavaScript.


More Info:


Why should I use it?

Most people rely on window.innerWidth, document.documentElement.clientWidth, or $(window).width() which do not always accurately report the viewport width used in CSS media queries. For example, WebKit browsers change the size of their CSS viewport when scroll bars are visible, while most other browsers do not. Since window.innerWidth remains constant regardless of the scroll bar state, it is not a good option for use with Chrome or Safari. Additionally, Internet Explorer 6, 7, and 8 do not support window.innerWidth. On the other hand, document.documentElement.clientWidth changes based on the scroll bar state and therefore is not a good option for Internet Explorer, Firefox, or Opera.

Size and delivery

Currently, viewportSize.js compresses to around 609 bytes (~0.59 KB), after minify and gzip. See viewportSize-min.js or try one of these online tools: [Microsoft Ajax Minifier]:(, [Uglify]:(, [Yahoo Compressor]:(, or Closure Compiler. Serve with gzip compression.


<script type="text/javascript">
	var width = viewportSize.getWidth();
	var height = viewportSize.getHeight();


viewportSize supports a broad range of browsers and devices (there are currently no known unsupported browsers).