title: Loading and Unloading JavaScript with CSS Media Queries in mind
body: <p>I'm using CSS Media Queries for making my website responsive:</p>
  
  <pre><code>@media (min-width:1200px) {
      // DESKTOP STYLING
  }
  
  @media (max-width:1200px) {
      // MOBILE STYLING
  }
  </code></pre>
  
  <p>I use <a href="https://github.com/paulirish/matchMedia.js" rel="nofollow">https://github.com/paulirish/matchMedia.js</a> to check for Media Query</p>
  
  <pre><code>if(min-width:1200px) {
      // DESKTOP JAVASCRIPT
  } else {
      // MOBILE JAVASCRIPT
  }
  </code></pre>
  
  <p>So initially everything works fine, when my screen is &lt; 1200px it shows mobile version if its higher it shows desktop version (javascript works as well).</p>
  
  <p>Problem now is when i start resizing the window for example:</p>
  
  <pre><code>1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE)
  2) RESIZE WINDOW &lt; 1200px (SWITCH TO MOBILE TEMPLATE)
     LOADS MOBILE JAVASCRIPT (SITE BREAKS)
  3) RESIZE WINDOW &gt; 1200px (SWITCH TO DESKTOP TEMPLATE)
     LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)
  </code></pre>
  
  <p>So i was wondering any ideas how to 'unload' javascript or maybe a elegant way to have two different javascript files loaded depending which media query is used ?</p>