CC-BY

Viewport: How to get viewport size.

jQuery(window).width() uses document.documentElement.clientWidth and is regarded as cross-browser compatible. Directly using .clientWidth is faster and equally compatible. The tables below compare these live against the inner/outer methods to determine the most accurate method: verge wins because it normalizes browser nuances to accurately match @media breakpoints.

width methods live output
@media breakpoint
verge.viewportW()
$(window).width() undefined
document.documentElement.clientWidth undefined
window.innerWidth undefined
window.outerWidth undefined
height methods live output
@media breakpoint
verge.viewportH()
$(window).height() undefined
document.documentElement.clientHeight undefined
window.innerHeight undefined
window.outerHeight undefined

Device: How to get device size.

Use window.screen.width for device width and window.screen.height for device height. .availWidth and .availHeight give you the device size minus UI taskbars. (Try on an iPhone.) Device size is static and does not change when the page is resized or rotated.

width methods live output
@media breakpoint
window.screen.width undefined
window.screen.availWidth undefined
height methods live output
@media breakpoint
window.screen.height undefined
window.screen.availHeight undefined

Document: How to get document size.

Document size methods are often needed in scrolling apps. Note the difference between jQuery(document).width() and the native properties (especially when the window is wider than the max-width of the body). jQuery uses the Math.max of 5 numbers to calculate this. For decent cross-browser support, the Math.max of the 3 document.documentElement properties seems to suffice.

width methods live output
$(document).width() undefined
document.body.clientWidth undefined
document.body.offsetWidth undefined
document.body.scrollWidth undefined
document.documentElement.clientWidth undefined
document.documentElement.offsetWidth undefined
document.documentElement.scrollWidth undefined
height methods live output
$(document).height() undefined
document.body.clientHeight undefined
document.body.offsetHeight undefined
document.body.scrollHeight undefined
document.documentElement.clientHeight undefined
document.documentElement.offsetHeight undefined
document.documentElement.scrollHeight undefined