Get the browser viewport dimensions with JavaScript

Questions

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size?

Or better yet, the viewport size of the browser with JavaScript? See green area here:

https://i.stack.imgur.com/zYrB7.jpg https://i.stack.imgur.com/zYrB7.jpg

Answers

http://dev.w3.org/csswg/mediaqueries/#height http://dev.w3.org/csswg/mediaqueries/#height

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidth and .innerHeight

http://www.w3.org/TR/CSS2/visuren.html#viewport http://www.w3.org/TR/CSS2/visuren.html#viewport http://www.quirksmode.org/mobile/viewports2.html http://www.quirksmode.org/mobile/viewports2.html
• zoom may cause values to be 1px off due to native rounding
• undefined in IE8-

document.documentElement.clientWidth and .clientHeight

• equals CSS viewport width minus scrollbar width
• matches @media (width) and @media (height) when there is no scrollbar
https://api.jquery.com/width/ https://api.jquery.com/width/ http://www.quirksmode.org/mobile/tableViewport.html http://www.quirksmode.org/mobile/tableViewport.html

Resources

http://ryanve.com/lab/dimensions/ http://ryanve.com/lab/dimensions/ http://github.com/ryanve/verge http://github.com/ryanve/verge http://github.com/ryanve/actual http://github.com/ryanve/actual

Source

License : cc by-sa 3.0

http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript

Related