Only request respond.js if media queries are not supported natively

[jbmoelker]

Using <script src="path/to/respond.js"> the script is requested, waited for and parsed by every browser regardless of whether the browser already supports media queries. Which at the moment affects about 88% of the users (according to caniuse.com).

@scottjehl, would you consider conditionally including respond.js after detecting there is no native support for media queries? Using the feature detection currently in the script, this would look something like:

<script>
(function(w){
  var mediaQueriesSupported = w.matchMedia && w.matchMedia('only all') !== null && w.matchMedia('only all').matches;
  if(!mediaQueriesSupported){
    document.write('<script src="path/to/respond.js"><\/script>');  
  }
}(window));
</script>

I would still keep the check in the script itself, but would see this as an optimisation. If you agree with this approach I could submit a pull request to include this in the readme and the demo file.

[jefflembeck]

@jbmoelker Our most common case for respond is actually to load it behind a conditional comment for IE6-8 (as those are the browsers that would stand to benefit from it.

[jbmoelker]

@jlembeck I understand using a conditional comment like <!--[if lte IE 8]> would target most of the browsers not supporting media queries. Personally I prefer feature detection over any specific browser targeting or sniffing. Either way, a conditional comment would also be a good enhancement in comparison to just including the script regardlessly. Would also like to see that one as a suggestion in the readme and demo files. My concern in general is mainly that developers will include scripts 'just in case' without giving it a second thought.