title: Call external JS file based on "media screen" value
body: <p>I'm trying this but it is not working:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="js/menu-collapser.js" type="text/javascript" media="media screen and (max-width: 599px)"&gt;&lt;/script&gt;
  &lt;/head&gt;
  ...
  &lt;/html&gt;
  </code></pre>
  
  <p>//menu-collapser.js :</p>
  
  <pre><code>jQuery(document).ready(function($){
      $('.main-navigation li ul').hide();
      $('.main-navigation li').has('ul').click(function() {
          $(this).children().toggle();
      });
  });
  </code></pre>
  
  <p>Do you have an idea on how to do this in the right way? The script work if used directly in the header with the  tags.</p>