Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

viewportSize

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

Demo: http://matanich.com/test/viewport-width/

More Info: http://www.matanich.com/2013/01/07/viewport-size/

Test: http://tysonmatanich.github.io/viewportSize/

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]:(http://ajaxmin.codeplex.com/), [Uglify]:(http://marijnhaverbeke.nl/uglifyjs), [Yahoo Compressor]:(http://refresh-sf.com/yui/), or Closure Compiler. Serve with gzip compression.

Sample

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

Support

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

About

Get the size of the CSS viewport using JavaScript.

Resources

Releases

No releases published

Packages

No packages published