Device and Viewport Size In JavaScript

By on .

viewport

How to get the viewport size: jQuery's $(window).width() is highly regarded as cross-broswer compatible. JavaScript's document.documentElement.clientWidth is faster and nearly as cross-broswer compatible. Consider using document.documentElement.clientWidth and a fallback to $(window).width() when jQuery is available. The tables below compare these live against the less reliable inner/outer methods:

width methodslive output
$(window).width() undefined
document.documentElement.clientWidthundefined
window.innerWidthundefined
window.outerWidthundefined
height methodslive output
$(window).height() undefined
document.documentElement.clientHeightundefined
window.innerHeightundefined
window.outerHeightundefined

device

How to get the device size: It's simple. Use window.screen.width for device width and window.screen.height for device height. The .availWidth/.availHeight methods give you the device size minus UI taskbars (try on an iPhone) and are slower outside of Webkit. Device size is static and does not change when the page is resized or rotated.

width methodslive output
window.screen.widthundefined
window.screen.availWidthundefined
height methodslive output
window.screen.heightundefined
window.screen.availHeightundefined

document

For further comparison, here are document size methods (not usually needed for responsive design but useful in other regards such as scrolling apps). Note the difference between $(document).width() and document.body.clientWidth when the window is wider than the max-width of the body:

width methodslive output
$(document).width()undefined
document.body.clientWidthundefined
height methodslive output
$(document).height() undefined
document.body.clientHeightundefined
Ξ