Revision 411329 of MediaQueryListListener

<p>{{SeeCompatTable}}</p>
<p>A <code>MediaQueryList</code> object maintains a list of <a href="/En/CSS/Media_queries" title="En/CSS/Media queries">media queries</a> on a {{ domxref("document") }}, and handles sending notifications to listeners when the media queries on the document change.</p>
<p>This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, if you need to programmatically detect changes to the values of media queries on a document.</p>
<h2 id="Method_overview" name="Method_overview">Method overview</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><code>void <a href="/en/DOM/MediaQueryListListener#handleChange()" title="en/DOM/MediaQueryListListener#handleChange()">handleChange</a>(MediaQueryList mql);</code></td>
    </tr>
  </tbody>
</table>
<h2 id="Methods">Methods</h2>
<h3 id="handleChange()">handleChange()</h3>
<p>Called when the media query list's evaluated state changes.</p>
<pre>
void handleChange(
&nbsp; MediaQueryList mql
); 
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>mql</code></dt>
  <dd>
    The {{ domxref("MediaQueryList") }} for which the evaluated result changed.</dd>
</dl>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("6.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Specification" name="Specification">Specification</h3>
<ul>
  <li><a class="external" href="https://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" title="https://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM&nbsp;View Module:&nbsp;The&nbsp;MediaQueryList Interface</a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/En/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
  <li><a href="/en/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li>
  <li>{{ domxref("MediaQueryList") }}</li>
  <li>{{ domxref("window.matchMedia()") }}</li>
</ul>