- Author: Tyson Matanich - http://matanich.com
- License: MIT
Why should I use it?
Most people rely on
$(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
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.
viewportSize supports a broad range of browsers and devices (there are currently no known unsupported browsers).