css - How to choose between Media Query (min-width, max-width), window.width, screen.width, device-width, etc -

i researching use of adaptive approach vs. reactive approach , in process have been reading @ discussions on media query, css width, screen width, window width, document width, etc. there no single document found addresses these parameters headon in 1 place , explore possible interrelationships in building adaptive or responsive sites.

here of questions not explained elsewhere in totality of context described above. have come conclusion , want clarification if conclusions wrong. did implement prototype appears work fine using many approaches. want know best practices implementing adaptive or reactive sites.

assumption:

a. wide audience different desktops , devices using modern browsers.

b. js-based solution preferred on pure-css.

c. focused on screen displays.

research (really, there not it!):

//the traditional way widths (using jquery): windowwidth    = $(window).width();    // returns width of browser viewport documentwidth  = $(document).width();  // returns width of html document screenwidth    = screen.width;         // screen width  - physical screen width   //this post css3 approach handling width mql = window.matchmedia('screen , (min-width:500px) , (max-width:800px)'); //check if there match: if (mql.matches) {  //serve customized page } //and there listener can added object returned  //by above query, in state changes when browser resized.   mql.addlistener(somelistener); //fired if match state changes 

most plugins supposedly simplifying media query api center on above api (e.g. enquire.js). , yes there device-width have not seen used anywhere other specifying pixel scale factor in meta tag. there many posts questioning why of above width parameters, retrieved through media query or through older approach, not match. here 1 such post. understand that.

now, questions are:

1. in media query hoopla , thousands of articles written on adaptive/responsive sites, concerned serving content based upon current browser width , response browser width changes? portrait/landscape width issue.
2. is correct actual device detection not targeted media queries , not necessary developing adaptive/reactive sites? sole goal of media queries (for screens) compartmentalize browser widths buckets or breakpoints (see breakpoint.js, example)?
3. for developing responsive/adaptive sites wide audience, worthwhile use device-detection services such deviceatlas?
4. what real advantages getting using media query api vs. getting $(window).width? wider browser support? standard approach? other advantages? not matter approach take?
5. are adaptive/responsive sites totally blind actual underlying physical device used user , rely solely on user agent info , widths discussed here?