Device and Viewport Size In JavaScript

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

转自：http://ryanve.com/lab/dimensions/