Media Query Detection

#1260800: Kill the overlay for widths below 640 pixels - Could possibly be solved by disabling the overlay at a certain breakpoint

I was just wanting to raise the awareness that as Drupal moves to focus on mobile, there will be lots of places where we will want to test against the screen size or something else in order to enable or disable javascript functionality.

It seems like all the issues above and maybe more in the future are influenced by the screen size.

For instance, in #1260800: Kill the overlay for widths below 640 pixels it is testing against a min width of 640px.

Why not instead, test for a named media query? In http://www.springload.co.nz/love-the-web/responsive-javascript they are giving these media queries names in css by using:

@media screen and (min-width: 56em) { 
    body:after { 
        content: 'wide-screen' 
    } 
} 

Drupal could call the min-width less than 640px media query the "small" media query or the "phone" media query. Then we could have some standards provided by Drupal in which contrib modules could check against to provide their javascript.

The script in the article not only allows for testing, but also provides callbacks so that your js could destroy some functionality and enable other functionality at different breakpoints.

For example if Drupal provided standard media queries for the following:
phone
tablet
desktop

Then modules like quicktabs could change the way tabs are interacted with on different devices. Maybe on phones you want the tabs to behave like an accordion. Maybe on tablet you want the tabs to be vertical tabs. Maybe on the desktop you want the tabs to behave like horizontal tabs.

In cases similar to the overlay, if someone doesn't like Drupal's 640px media query, simply override Drupal's css file and all the javascript would continue to work. Otherwise you would need to hunt down every instance of each check in Drupal's javascript and change and override the javascript.

I think it could also reduce future js code complexity. What if Drupal decides it wants to check against pixel density(Retina displays) or type length (in ems)? Media queries are perfect for checking these types of things. Instead of writing more and different checks in javascript, use javascript to simply check body:after property.

Sorry, I'm doing a lot of "talking out loud." I could be way off on all of this. I was just hoping for some discussion to see if any one else is noticing this pattern and thought it might be a good lightweight solution.

Here is another technique I just read about http://viget.com/inspire/managing-javascript-on-responsive-websites using https://github.com/ten1seven/jRespond or https://github.com/sparkbox/mediaCheck

Here is another good looking one. http://wickynilliams.github.com/enquire.js/

@attiks - Just thinking out loud... If breakpoints are declared with your http://drupal.org/project/breakpoints module, perhaps there would be some way for this to hook into that? That way if core themes declare breakpoints, then you could also have js that could respond to those breakpoints?

Closing in favor of #1815602: Introduce a polyfill for matchMedia