title: Detect dynamic media queries with JavaScript without hardcoding the breakpoint widths in the script?
body: <p>I've been searching for a lightweight, flexible, cross-browser solution for accessing CSS Media Queries in JavaScript, <em><strong>without the CSS breakpoints being repeated in the JavaScript code</strong></em>.</p>
  <p>CSS-tricks posted a <a href="https://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/" rel="nofollow noreferrer">CSS3 animations-based solution</a>, which seemed to nail it, however it recommends using <a href="http://wicky.nillia.ms/enquire.js/" rel="nofollow noreferrer">Enquire.js</a> instead.</p>
  <p>Enquire.js seems to still require the Media Query sizes to be hardcoded in the script, e.g.</p>
  <pre><code>enquire.register(&quot;screen and (max-width:45em)&quot;, { // do stuff }
  </code></pre>
  <p><strong>The Problem</strong></p>
  <p>All solutions so far for accessing Media Queries in Javascript seem to rely on the breakpoint being hardcoded <em>in the script</em>. How can a breakpoint be accessed in a way that allows it to be defined only in CSS, without relying on <code>.on('resize')</code>?</p>
  <p><strong>Attempted solution</strong></p>
  <p>I've made my own version that works in IE9+, using a hidden element that uses the <code>:content</code> property to add whatever I want when a Query fires (same starting point as <a href="http://zerosixthree.se/detecting-media-queries-with-javascript/" rel="nofollow noreferrer">ZeroSixThree's solution</a>):</p>
  <p><em>HTML</em></p>
  <pre><code>&lt;body&gt;
      &lt;p&gt;Page content&lt;/p&gt;
      &lt;span id=&quot;mobile-test&quot;&gt;&lt;/span&gt;
  &lt;/body&gt;
  </code></pre>
  <p><em>CSS</em></p>
  <pre><code>#mobile-test {
      display:none;
      content: 'mq-small';
  }
  @media screen only and (min-width: 25em) {
      #mobile-test {
          content: 'mq-medium';
      }
  }
  @media screen only and (min-width: 40em) {
      #mobile-test {
          content: 'mq-large';
      }
  }
  </code></pre>
  <p><em>JavaScript using jQuery</em></p>
  <pre><code>// Allow resizing to be assessed only after a delay, to avoid constant firing on resize. 
  var resize;
  window.onresize = function() {
      clearTimeout(resize);
      // Call 'onResize' function after a set delay
      resize = setTimeout(detectMediaQuery, 100);
  };
  
  // Collect the value of the 'content' property as a string, stripping the quotation marks
  function detectMediaQuery() {
      return $('#mobile-test').css('content').replace(/&quot;/g, '');
  }
  
  // Finally, use the function to detect the current media query, irrespective of it's breakpoint value
  $(window).on('resize load', function() {
      if (detectMediaQuery() === 'mq-small') {
          // Do stuff for small screens etc
      }
  });
  </code></pre>
  <p>This way, the Media Query's breakpoint is handled entirely with CSS. No need to update the script if you change your breakpoints. How can this be done?</p>