I need an easy way to detect CSS3 media query support using jquery

Question

I need a quick and dirty way to detect media query support using jquery. I defined a function as follows:

function mediaQueriesEnabled () {
   var v = parseFloat($.browser.version);
   if ($.browser.msie) {
      if (v < 9)
         return (false);
   }
   return (true);
}

Can someone help me fix this up a bit? Looking at this page:

http://caniuse.com/css-mediaqueries

I realized that there are some complexities here. For example, when I test my version of safari, I get "534.57.2". I want to avoid installing modernizr for now, mainly because I'm in a crunch and I need to handle most situations in the short term. Any help is appreciated!

Answer 1

You can create a stylesheet with a media query and see if it works.

In your HTML:

<style>@media all and (min-width:1px) {
    .mediatest {position:absolute}
}</style>

(Or you could dynamically create the stylesheet, but that's harder)

Then in your script:

var d = document.createElement('div');
d.className = "mediatest";
document.body.appendChild(d);
if( window.getComputedStyle && window.getComputedStyle(d).position == "absolute") {
    // supports media queries!
}
document.body.removeChild(d);