jQuery(window).width()usesdocument.documentElement.clientWidth and is
regarded as cross-browser compatible.
Directly using .clientWidth is
and equally compatible.
The tables below compare these live against the inner/outer methods to determine the most accurate method:
verge wins because it
to accurately match @media breakpoints.
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.
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).
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.