I am researching the use of adaptive approach vs. reactive approach and in the process have been reading at all the discussions on media query, css width, screen width, window width, document width, etc. There is no single document that I found that addresses all these parameters headon in one place and explore their possible interrelationships in building adaptive or responsive sites.
Here are some of my questions which are not fully explained elsewhere in the totality of the context described above. I have come to some conclusion and want clarification if the conclusions are wrong. I did implement a prototype but it appears to work fine using many approaches. I want to know what are the BEST PRACTICES for implementing adaptive or reactive sites.
Assumption:
a. Wide audience with different desktops and devices but using modern browsers.
b. JS-based solution preferred over pure-CSS.
c. Only focused on screen displays.
RESEARCH (Really, there is not much to it!):
//The traditional way to get 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 is post CSS3 approach to handling width
mql = window.matchMedia('screen and (min-width:500px) and (max-width:800px)');
//Check if there was a match:
if (mql.matches) { //serve your customized page }
//And then there is the listener that can be added to the object returned
//by the above query, as in for state changes when the browser is resized.
mql.addListener(someListener); //Fired only if the match state changes
Most plugins supposedly simplifying the media query API really center on the above API only (e.g. enquire.js). And yes there is device-width which I have not seen used anywhere other than specifying the pixel scale factor in the meta tag. There are many posts questioning why some of the above width parameters, retrieved through media query or through the older approach, do not match. Here is one such post. I understand that.
Now, my questions are:
- In all this media query hoopla and the thousands of articles written on adaptive/responsive sites, all we are concerned with is serving content based upon the current browser width and response to browser width changes? Even portrait/landscape is really a width issue.
- Is it correct that actual device detection is not targeted by media queries and is not really necessary for developing adaptive/reactive sites? That the sole goal of media queries (for screens) is to compartmentalize browser widths into buckets or breakpoints (See breakpoint.js, for example)?
- For developing responsive/adaptive sites to a wide audience, is it worthwhile to use device-detection services such as deviceAtlas?
- What real advantages are we getting by using media query API vs. just getting $(window).width? Is it wider browser support? Standard approach? Other advantages? Does not matter which approach you take?
- Are most adaptive/responsive sites totally blind to the actual underlying physical device used by the user and rely solely on USER AGENT info and the widths discussed here?
