Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 747079 of MediaQueryListListener

  • Revision slug: Web/API/MediaQueryListListener
  • Revision title: MediaQueryListListener
  • Revision id: 747079
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment
Tags: 

Revision Content

{{APIRef("CSSOM View"}}

{{SeeCompatTable}}

A MediaQueryList object maintains a list of media queries on a {{ domxref("document") }}, and handles sending notifications to listeners when the media queries on the document change.

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 detect changes to the values of media queries on a document.

A MediaQueryListListener is a callback function that gets invoked with a single argument, the {{ domxref("MediaQueryList") }} for which the evaluated result changed.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatGeckoDesktop("6.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specification

See also

Revision Source

 
<p>{{APIRef("CSSOM View"}}</p>

<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 detect changes to the values of media queries on a document.</p>

<p>A&nbsp;<code style="font-size: 14px;">MediaQueryListListener</code>&nbsp;is a callback function that gets invoked with a single argument, t<span style="line-height: 1.5;">he {{ domxref("MediaQueryList") }} for which the evaluated result changed.</span></p>

<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>
Revert to this revision