title: Enable/Disable javascript using Media Query
body: <p>I have a slide where I want to show photos specific for each device. iPhone, iPad, Desktop.</p>
  
  <p>I would like to use something like this to filter each out. Obviously display:none isn't going to work since it's JavaScript, but this is just a general idea of how it should work:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  @media only screen and (min-width: 800px) {
      #slide-desktop{display:block;}
      #slide-ipad{display:none;}
      #slide-iphone{display:none;}
  }
  @media only screen and (min-width: 481px) and (max-width: 799px) {
      #slide-desktop{display:none;}
      #slide-ipad{display:block;}
      #slide-iphone{display:none;}
  }
  @media only screen and (max-width: 480px) {
      #slide-desktop{display:none;}
      #slide-ipad{display:none;}
      #slide-iphone{display:block;}
  }
  &lt;/style&gt;
  &lt;div id="slide-desktop"&gt;
      &lt;script&gt;
          $.vegas('slideshow', {
          delay:6000,
          backgrounds:[
          { src:'images/slide/desktop.jpg', fade:600 },
          ]
          })('overlay');
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;div id="slide-ipad"&gt;
      &lt;script&gt;
          $.vegas('slideshow', {
          delay:6000,
          backgrounds:[
          { src:'images/slide/ipad.jpg', fade:600 },
          ]
          })('overlay');
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;div id="slide-iphone"&gt;
      &lt;script&gt;
          $.vegas('slideshow', {
          delay:6000,
          backgrounds:[
          { src:'images/slide/iphone.jpg', fade:600 },
          ]
          })('overlay');
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>