Revision 471945 of MediaQueryList

<div>
  {{SeeCompatTable}}</div>
<p>A <code>MediaQueryList</code> object maintains a list of <a href="/en-US/docs/CSS/Media_queries" title="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-US/docs/DOM/MediaQueryList#addListener()" title="DOM/MediaQueryList#addListener()">addListener</a>(MediaQueryListListener listener);</code></td>
    </tr>
    <tr>
      <td><code>void <a href="/en-US/docs/DOM/MediaQueryList#removeListener()" title="DOM/MediaQueryList#removeListener()">removeListener</a>(MediaQueryListListener listener);</code></td>
    </tr>
  </tbody>
</table>
<h2 id="Properties" name="Properties">Properties</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Property</td>
      <td class="header">Type</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>matches</code></td>
      <td><code>boolean</code></td>
      <td><code>true</code> if the {{ domxref("document") }} currently matches the media query list; otherwise <code>false</code>. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>media</code></td>
      <td><code>DOMString</code></td>
      <td>The serialized media query list.</td>
    </tr>
  </tbody>
</table>
<h2 id="Methods" name="Methods">Methods</h2>
<h3 id="addListener()" name="addListener()">addListener()</h3>
<p>Adds a new listener to the media query list. If the specified listener is already in the list, this method has no effect.</p>
<pre>
void addListener(
  MediaQueryListListener listener
);</pre>
<h4 id="Parameter_(for_addListener_method)" name="Parameter_(for_addListener_method)">Parameter (for addListener method)</h4>
<dl>
  <dt>
    <code>listener</code></dt>
  <dd>
    The {{ domxref("MediaQueryListListener") }} to invoke when the media query's evaluated result changes.</dd>
</dl>
<h3 id="removeListener()" name="removeListener()">removeListener()</h3>
<p>Removes a listener from the media query list. Does nothing if the specified listener isn't already in the list.</p>
<pre>
void removeListener(
  MediaQueryListListener listener
);</pre>
<h4 id="Parameter_(for_removeListener_method)" name="Parameter_(for_removeListener_method)">Parameter (for removeListener method)</h4>
<dl>
  <dt>
    <code>listener</code></dt>
  <dd>
    The {{ domxref("MediaQueryListListener") }} to stop calling on changes to the media query's evaluated result.</dd>
</dl>
<h2 id="Browser_compatibility" name="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>{{CompatVersionUnknown}}</td>
        <td>{{ CompatGeckoDesktop("6.0") }}</td>
        <td>10</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>
<h2 id="Specification" name="Specification">Specification</h2>
<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 View Module: The MediaQueryList Interface</a></li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
  <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
  <li>{{ domxref("window.matchMedia()") }}</li>
  <li>{{ domxref("MediaQueryListListener") }}</li>
</ul>