How to get the viewport size: jQuery's $(window).width() is highly regarded as cross-broswer compatible. JavaScript's document.documentElement.clientWidth is fasterand is also cross-broswer compatible. Consider using document.documentElement.clientWidth — if you look in the jQuery source that's what they're using. The tables below compare these live against the less consistent inner/outer methods:
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.
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 some of the others (especially when the window is wider than the max-width of the body). jQuery uses the Math.max of 5 numbers to calculate this: the last 4 in these blocks and the docElem's clientWidth / clientHeight. For decent cross-browser support I think the Math.max of the last 3 in these blocks is sufficient rather than the 5 jQuery uses.